Every now and then, a debate flares up about the value of typed JavaScript. “Just write more tests!” yell some opponents. “Replace unit tests with types!” scream others. Both are right in some ways, and wrong in others. Twitter affords little room for nuance. But in the space of this article we can try to lay out a reasoned argument for how both can and should coexist.
Correctness: what we all really want
It’s best to start at the end. What we really want out of all this meta-engineering at the end is correctness. I don’t mean the strict theoretical computer science definition of it, but a more general adherence of program behavior to its specification: We have an idea of how our program ought to work in our heads, and the process of programming organizes bits and bytes to make that idea into reality. Because we aren’t always precise about what we want, and because we’d like to have confidence that our program didn’t break when we made a change, we write types and tests on top of the raw code we already have to write just to make things work in the first place.
So, if we accept that correctness is what we want, and types and tests are just automated ways to get there, it would be great to have a visual model of how types and tests help us achieve correctness, and therefore understand where they overlap and where they complement each other.
A visual model of program correctness
If we imagine the entire infinite Turing-complete possible space of everything programs can ever possibly do — inclusive of failures — as a vast gray expanse, then what we want our program to do, our specification, is a very, very, very small subset of that possible space (the green diamond below, exaggerated in size for sake of showing something):
Our job in programming is to wrangle our program as close to the specification as possible (knowing, of course, we are imperfect, and our spec is constantly in motion, e.g. due to human error, new features or under-specified behavior; so we never quite manage to achieve exact overlap):
Note, again, that the boundaries of our program’s behavior also include planned and unplanned errors for the purposes of our discussion here. Our meaning of “correctness” includes planned errors, but does not include unplanned errors.
Tests and Correctness
We write tests to ensure that our program fits our expectations, but have a number of choices of things to test:
The ideal tests are the orange dots in the diagram — they accurately test that our program does overlap the spec. In this visualization, we don’t really distinguish between types of tests, but you might imagine unit tests as really small dots, while integration/end-to-end tests are large dots. Either way, they are dots, because no one test fully describes every path through a program. (In fact, you can have 100% code coverage and still not test every path because of the combinatorial explosion!)
The blue dot in this diagram is a bad test. Sure, it tests that our program works, but it doesn’t actually pin it to the underlying spec (what we really want out of our program, at the end of the day). The moment we fix our program to align closer to spec, this test breaks, giving us a false positive.
The purple dot is a valuable test because it tests how we think our program should work and identifies an area where our program currently doesn’t. Leading with purple tests and fixing the program implementation accordingly is also known as Test-Driven Development.
The red test in this diagram is a rare test. Instead of normal (orange) tests that test “happy paths” (including planned error states), this is a test that expects and verifies that “unhappy paths” fail. If this test “passes” where it should “fail,” that is a huge early warning sign that something went wrong — but it is basically impossible to write enough tests to cover the vast expanse of possible unhappy paths that exist outside of the green spec area. People rarely find value testing that things that shouldn’t work don’t work, so they don’t do it; but it can still be a helpful early warning sign when things go wrong.
Types and Correctness
Where tests are single points on the possibility space of what our program can do, types represent categories carving entire sections from the total possible space. We can visualize them as rectangles:
We pick a rectangle to contrast the diamond representing the program, because no type system alone can fully describe our program behavior using types alone. (To pick a trivial example of this, an id that should always be a positive integer is a number type, but the number type also accepts fractions and negative numbers. There is no way to restrict a number type to a specific range, beyond a very simple union of number literals.)
Types serve as a constraint on where our program can go as you code. If our program starts to exceed the specified boundaries of your program’s types, our type-checker (like TypeScript or Flow) will simply refuse to let us compile our program. This is nice, because in a dynamic language like JavaScript, it is very easy to accidentally create a crashing program that certainly wasn’t something you intended. The simplest value add is automated null checking. If foo has no method called bar, then calling foo.bar() will cause the all-too-familiar undefined is not a function runtime exception. If foo were typed at all, this could have been caught by the type-checker while writing, with specific attribution to the problematic line of code (with autocomplete as a concomitant benefit). This is something tests simply cannot do.
We might want to write strict types for our program as though we are trying to write the smallest possible rectangle that still fits our spec. However, this has a learning curve, because taking full advantage of type systems involves learning a whole new syntax and grammar of operators and generic type logic needed to model the full dynamic range of JavaScript. Handbooks and Cheatsheets help lower this learning curve, and more investment is needed here.
Fortunately, this adoption/learning curve doesn’t have to stop us. Since type-checking is an opt-in process with Flow and configurable strictness with TypeScript (with the ability to selectively ignore troublesome lines of code), we have our pick from a spectrum of type safety. We can even model this, too:
Larger rectangles, like the big red one in the chart above, represent a very permissive adoption of a type system on your codebase — for example, allowing implicitAny and fully relying on type inference to merely restrict our program from the worst of our coding.
Moderate strictness (like the medium-size green rectangle) could represent a more faithful typing, but with plenty of escape hatches, like using explicit instances of any all over the codebase and manual type assertions. Still, the possible surface area of valid programs that don’t match our spec is massively reduced even with this light typing work.
Maximum strictness, like the purple rectangle, keeps things so tight to our spec that it sometimes finds parts of your program that don’t fit (and these are often unplanned errors in your program behavior). Finding bugs in an existing program like this is a very common story from teams converting vanilla JavaScript codebases. However, getting maximum type safety out of our type-checker likely involves taking advantage of generic types and special operators designed to refine and narrow the possible space of types for each variable and function.
Notice that we don’t technically have to write our program first before writing the types. After all, we just want our types to closely model our spec, so really we can write our types first and then backfill the implementation later. In theory, this would be Type-Driven Development; in practice, few people actually develop this way since types intimately permeate and interleave with our actual program code.
Putting them together
What we are eventually building up to is an intuitive visualization of how both types and tests complement each other in guaranteeing our program’s correctness.
Our Tests assert that our program specifically performs as intended in select key paths (although there are certain other variations of tests as discussed above, the vast majority of tests do this). In the language of the visualization we have developed, they “pin” the dark green diamond of our program to the light green diamond of our spec. Any movement away by our program breaks these tests, which makes them squawk. This is excellent! Tests are also infinitely flexible and configurable for the most custom of use cases.
Our Types assert that our program doesn’t run away from us by disallowing possible failure modes beyond a boundary that we draw, hopefully as tightly as possible around our spec. In the language of our visualization, they “contain” the possible drift of our program away from our spec (as we are always imperfect, and every mistake we make adds additional failure behavior to our program). Types are also blunt, but powerful (because of type inference and editor tooling) tools that benefit from a strong community supplying types you don’t have to write from scratch.
In short:
Tests are best at ensuring happy paths work.
Types are best at preventing unhappy paths from existing.
Use them together based on their strengths, for best results!
If you’d like to read more about how Types and Tests intersect, Gary Bernhardt’s excellent talk on Boundaries and Kent C. Dodds’ Testing Trophy were significant influences in my thinking for this article.
How can we provide an accessible user experience for keyboard-only and assistive technology users without affecting the experience for any other users? We’ve kindly asked Aaron Pearlman, Principal UX Designer at Deque Systems, to share some practical tools and techniques to ensure that we’re all providing an inclusive and accessible experience for our users.
As a part of our Smashing Membership, we run Smashing TV, a series of live webinars, every week. No fluff — just practical, actionable webinars with a live Q&A, run by well-respected practitioners from the industry. Indeed, the Smashing TV schedule looks pretty dense already, and it’s free for Smashing Members, along with recordings — obviously.
We hope you’ll enjoy the webinar as much as we did!
“UX Optimizations For Keyboard-Only And Assistive Technology Users” with Aaron Pearlman (Watch video on YouTube)
Aaron Pearlman: You should be able to see my screen. Okay, right now, let me just… There we go, very good. Well, hello everybody. Like I said, I am Aaron Pearlman, the Principal User Experience Designer for Deque. And I think— Uh, let me move— Zoom tends to put a bit of UI in the way, so I apologize if I look like I’m frantically moving and mouse hopefully it’s not showing up. And so, today we’re going to talk about the types of optimizations that you can make for Keyboard-Only and Assistive Technology users. As I mentioned a moment ago, these type of optimizations, these type of things aren’t going to preclude anyone else from using your… they’re not going to be unutilized by other people as well. They just tend to be things that are going to be more advantageous to users that dominantly use a system with keyboard Only User Assistive Technology.
Aaron Pearlman: For those who aren’t familiar with what that means, what a Keyboard-Only User Assistive Technology is— a keyboard only user would be somebody who just typically uses your keyboard to traverse a system. So they’re going to be using tab and Shift tab a lot and the arrow keys to traverse your system, so focus is quite important to them. You might find this one individual may have motor skill issues, may have vision deficiencies as well, the keyboard-only users, and then assistive technology users also use a keyboard to traverse your system, they may use other assistive technologies as well such as screen meters like VoiceOver or a braille reader or something like that.
Aaron Pearlman: So, that’s kind of what we’re focusing on — our users of that nature because a good portion of individuals who have disabilities tend to fall into this camp. That doesn’t mean everybody. Certainly, there are a myriad of different disabilities and gradiations in between, but for the purpose of this, this is what we’re going focus on today.
Aaron Pearlman: So, a little bit of an overview of what we’re going to cover: we’re going to talk a little bit of design process with plenty of maybe doing a little bit of an exercise type-of-thing that we might go into, maybe not, before we go to the skip links. And then skip links are going to be one of the features that we’re going to cover, ways to optimize your modal, and how to handle focus. So, these are going to be the three big categories that we’re going to cover and then we’ll have time for questions when we’re all done.
Aaron Pearlman: To start, I thought we could do a little bit of UX design process overview. I was in different workshops and stuff, I find that there a myriad of different individuals that are there from lots of different disciplines, not everybody is a user experience designer, so they may not be as familiar with the process that many UX designers employ. So for this, I thought we would just briefly go over it, we’re not going to spend a tremendous amount of time on it, but I find it merits going over just briefly. Also because it’s going to tie into designing accessibly as well. So, most UX design tends to go through a process called discovery, it’s not always called discovery, sometimes it’s called rapid ideation, rapid iteration. A lot of people have different names for it, but the point is that it’s the part of the design process where a lot of the fabrication happens.
Aaron Pearlman: It’s a lot of the time where we have also different ideas and requirements gathering, it’s one where a lot of research and synthesizing that with your organizational goals and filtering that with all of that information, and what comes out of it are typically artifacts that allow us to be able to build the system that we’re going to be making or the features that we’re making. Those tend to be — they’re not always — but they tend to be things like prototypes, sometimes you’ll see mental models that will come out of them as well. But a prototype in some level of fidelity that is a reflection of how your target user is going to achieve their goals. The TLDR is that reiterate design and we test with users and reiterate, test with users, reiterate, test with users, and then in the end, it ends up going to be built.
Aaron Pearlman: You think that’s important, is the considerations for accessibility are that we want to be thinking about and doing accessibility throughout that design process. And different levels of fidelity can merit, thinking about different types of things, it really depends. Won’t go into a lot of that, but just in general, we want to incorporate those heuristics and methods, and we’re going to as designers grow our powers of accessibility over time, just as we grow our powers of being a good user experience designer over time. There’s not an expectation in the beginning that you’re going to go and read WCAG 2.1, then you’re going to read the ARIA spec, and then you’re going to be done and you’re not going make any more mistakes, or you’re not going to miss anything when it comes to your designs and designing accessibly. That’s not necessarily reasonable by any stretch of the imagination.
Aaron Pearlman: Just know that you’re going to be learning over time. Certainly I still mistakes in accessibility, and everything that I work on and it’s just all about getting better. So, [inaudible] because I’m always designing accessibly. So one small plug though it’s relevant to what we’re going to be working on today is called Trane. It’s our fully accessible pattern library at Deque, we use it to build our own products. It’s an HTML, CSS and JavaScript front end framework, it quite similar to Bootstrap, if you’ve ever used anything like that. We also have a react library that’s sister library too as well. Our team develops in react. But we’re going to be looking at a few of the things in here today as examples. But this is open source, it’s available, there will be a link to it at the end of this deck, which I’ll make available to everybody.
Aaron Pearlman: And it’s free for you to use and get on get branches and use it to your heart’s content or contribute to it, we’d love to see a contribution to it as well. So just a small plug, but we will be referring to it as we go through. So for the first thing that we’re going to look at are skip links. And for those who may not be familiar with what a skip link is, skip links are little links that will tend to show up as the very first tab stop in a web application or website. And what they allow you to do is they allow you to bypass parts of the website. Why would you want to do that?
Aaron Pearlman: Well, if you have a website that has really rich menu, that may be a big billboard menu or just has a lot of stuffs to it, if you’re a Keyboard Only or Assistive Technology User, when you get to that site and your VoiceOver begins to read off of it, or even not, even, maybe you are a sighted user, you just use your keyboard only, you’re going to have to tab cycle through all of those different items to get down to the contents or to the workspace that you want to begin whatever your activity that you’re doing there is. And so, what a skip link allows you to do is to bypass typically, typically navigation to get to the workspace area of that application.
Aaron Pearlman: There can be multiple links sometimes and typically only see one, but we have some examples. I’ll show you an example of where you can use multiple skip links as well. So I thought we could look at a couple different types of Skip links or a few different types of skip links, and then we’ll look at another page that doesn’t have a skip link, and maybe talk a little bit about where one might be useful there. The first one we’re going to look at, hopefully you can see my screen. The first one we’re going to look at is this skip link that we use on deque.com and what it is, is what I would call a displacement element in that it displaces the page. So when I tab into here, I can see the skip link is there and it will tell me to skip to content.
Aaron Pearlman: And when I select that, it will send me to the content below, and I call it displacement because it literally inserts and hides itself and inserts itself into there and displaces it. This was the skip link that we chose to use for our content, but it’s one that’s very common. You’ll see it insert itself at the top of a website or web application. The next one we’re going to look at is one at a site that I’m sure that many of you have used or used quite frequently. It’s Amazon, we’ll look at their skip link. When I tab in there, if you look in the upper left corner there, you’ll see it overlaid, this is an overlay style, this is very, very common where it’ll overlay the content, and so it will often skip whatever’s behind it to show you the skip to main content there.
Aaron Pearlman: The pros and cons between displacing versus overlaying are negligible. If you find that your content is something that you never want to obfuscate, then you may want to insert something and just use it, displacement one, vice versa, it doesn’t matter, that’s fine as well. If you’re designing content that reads from right to left, like Arabic content, you may put your skip link in the upper right corner, it may merit that. It really comes down to what’s appropriate. But ultimately, that discretion will be to the designer in their team. So, this is an example of two skip links that were a single skip link, and I thought I would show you one where there are multiple options inside the skip link.
Aaron Pearlman: I’m going to pull up that example, this is from our pattern library. Now for this particular example, I wouldn’t actually design something that had multiple skip links for it because it doesn’t really merit it, but we just did it for the purpose of demonstrating it. So I’m going to tab in and in the upper left corner, we use an overlay that shows you two skip links right here. And these are tab stops inside of here, so if I hit tab again, we’re going to tab into the next one and if I tab away, it’s going to go. If I tab again, it’s going to leave and it’s going to go into the header at the top there. I’m going to shift tab back, shift tab back so that we can see that we can move in and out of here.
Aaron Pearlman: And then I will go ahead and enter one of these just so that you can see it. And what happens at this point when I select it, it sends me into the workspace area and it actually focuses that workspace area. What you’ll see for a lot of web applications is they don’t actually show the focus itself, we wanted to show that in our applications, this isn’t a focus of elements so to speak, but it is something that can take focus. And then from here, we’re going to focus and then we can go to the different items inside of there that are the focus of all elements that are inside of there, the [inaudible 00:12:28] elements. So, those are examples of a few different ways that you can do skip links.
Aaron Pearlman: Like I said, there’s an example inside the pattern library, you’re welcome to use it, we also have a version of it as well, I believe here that has errors. We have a single skip link example as well, and you can just use that as well. So we have a couple of different examples here. But those are examples of common ways that you can use skip links. And they are primarily beneficial to individuals that only use their keyboard to traverse the system when they use a system technology as a result of that.
Aaron Pearlman: But at sometimes, there can be other instances where that a skip link potentially could be beneficial. I’ve seen it can be potentially beneficial. You could imagine an instance where the big workspace of your site maybe it’s a bunch of search results and it does a lazy score where you’ll scroll to the bottom and then it’ll load more results, and scroll to the bottom and it’ll load more results, you scroll to the bottom, and it will load more results.
Aaron Pearlman: Well, how do you get to the footer? And I’ve had this trouble actually before, where I’ve gone to search engines and I was never able to get to the footer. And what would’ve been nice is the skip link that actually let me skip to the footer, because I was looking for information down in the footer. So there’s ways that skip links can be beneficial to that. It’s not the only way that you can solve that problem. Certainly, you can use hard keys or shortcut menus as well. There are lots of different techniques to accomplish these goals, but that’s the one that skip links tend to be very good at [inaudible 00:14:13]. Some things to keep in mind when designing a skip link is that, typically it’s going to be the very first tab stop on your website web application.
Aaron Pearlman: And that’s commonly where it’s found, and so if I’m screaming or a keyboard only user, I can get to it immediately. It’s the very first thing I can do when I enter in. So if it’s something that a web app that I use frequently, I can get right to what I’m trying to do. It should also be visually depicted where it is supposed to be in the information, in the AI basically, so you can put skip links and other parts of your application as well, like I could put one here if I wanted to, find a long scrolling stack site and I wanted to do that, and I wanted to have a skip link within something. I’m fairly sure that you can anchor into different things like that, but it should visually be represented where it should be, inside of the application.
Aaron Pearlman: In general, that’s extremely uncommon. Most skip links are always in the very first tab stops. In general, don’t do that. I think you technically can, but I would say don’t. And then the final thing is it is an interactive element and it’s the past color contrast, so make sure that it does, if you decide to use like an image or something in it, I would, but if you did, it needs to have the proper accessible name along with it as well. In general, most people use texts and links, so it’s going to be marked up as a link. Just make sure that it is passing color contrast so that it [inaudible 00:16:07]. Very good. So that’s kind of all we have for skip links.
Aaron Pearlman: It’s a fairly succinct but very common pattern that you see everywhere and it’s something that you can add fairly, it’s a fairly straight forward to add to your web application, but it can make a big difference for individuals who use their keyboard or system technology. So let me go ahead and close this and let’s move on to modal optimizations. Chose to do this because modals are very, very, very, very common amongst most web apps and they come in a lot of different forums, a lot of different ways that modals are shaped and created.
Aaron Pearlman: But some common things that I see that show up in more of the things that we can correct, until there’s some optimizations that we can do to make it a better experience for keyboard-Only and Assistive Technology users. And in general, I think your modal are much better one. One thing I thought I would show here really quickly is, one important thing that a Modal needs to do is it needs to be able to trap focus inside of it. I wanted to show an example of … it’s right here. I love dribble by the way, so this is not a dig against them. This is probably just a small oversight here. I used them all of the time as a delightful site and has wonderful stuff on it.
Aaron Pearlman: So if I were to hit the sign in, oops, I’m sorry, the sign up. Here’s a modal here and something that can happen sometimes. If you notice carefully, I’m hitting tab, tab, tab, tab, tab. As you can see behind the screen, it’s a little bit difficult to see. You can see focus hasn’t quite been trapped inside the Modal and this can happen sometimes. So if I was a user who’s using Assistive technology or a Keyboard-Only, it would be very difficult for me to get back to this.
Aaron Pearlman: It’s something that happens very, very, very, very commonly, and it certainly can happen when you’re inserting different interesting things into Modal. So something we want to make sure of, and the reason I’m bringing that up, the reason that’s actually very, very important is when a modal is evoked, it needs to sort of announce itself to the individual that evoked it, know what they basically just opened, but they actually opened the correct thing.
Aaron Pearlman: And so, the way that it can announce itself is that, either the body of the modal needs to be focused or potentially the header of the modal can be focused so that we can tell the individual that’s evoking the modal, that it is what’s happening. So if they have voice, they’re using for example, VoiceOver on it, it’ll tell them what they’re looking at. So I thought I’d give a couple examples of ways that the body can be focused and then an example of how model can focus the header instead and then what we can do with that.
Aaron Pearlman: I’m going to open up this really quick here. Very good. And so the modal that they have for this, I think it’s a clothing site right here. And what happened is it focused the body and I can show that best by… I’m going to turn on VoiceOver really quick. I’m going to pull it up.
VoiceOver: VoiceOver on Chrome.] Bonobos, [inaudible 00:20:10]-
Aaron Pearlman: And you won’t be able to hear it-
VoiceOver: Google Chrome, Aaron.pearlman@deque.com-
Aaron Pearlman: But you’ll be able to see it.
VoiceOver: Close the card, your card is empty, group has keyboard focus. You’re currently on the group in opening your card, close the card, your card is empty group. You’re currently on the group inside of web content, VoiceOver off.
Aaron Pearlman: So right there when I focused it, it read out a bit of everything that was going on your card closed and your card is empty because of the buying was focused at that point. And that’s perfectly valid. That’s a perfectly valid way of focusing your modals. It’s not a problem at all. And then from there you can tab cycle through everything that’s inside of it. Another common way of when a modal is evoked is to focus the header.
Aaron Pearlman: And that’s what we do in on the modals that we use for our applications is we focus the header. So I’m going to evoke the modal, and as you can see right here, focus is right here where it says modal with form, focus is right there on the header. We actually, rather than indicating that as like an index, we programmatically focus that. And the reason that we programmatically focus that as I tab cycle through here, it’s now going to the close button, also in the header, then to the first interactive element, which is field to the next field, to the next field, to the next fields, tabbing again to the save, tabbing again to the cancel.
Aaron Pearlman: And from here when I hit tab, if that header was a tab stop, it would go there, but we chose not to do that. Instead, we go to the close and the reason that we do that is just if somebody was using Voice Over as you may have seen some of what was being written and was going into my ears at the same time, it was actually very a bit distracting because it speaks very quickly, it’s a bit chattery. And so one of the optimizations that we wanted to make for the experience here was to make it a little less chattery. So yes, we announce it, it goes, we programmatically focus modal with form when they first get there, so that it lets them know that the modal that they evoked is in fact it’s what they’re currently focused on.
Aaron Pearlman: But we don’t need to announce it again and again and again if they were to cycle through this shifts cycling through this modal. So it’s a small optimization likely would be completely invisible to the majority of your cited mouse only users. But that small optimization, you can imagine if I used modals a lot for filling out forms frequently and I was a user that used Keyboard-Only or Assistive Technology that optimization would add up over time. So, little teeny user experience things that we can do, that can make a significant difference overall in the care that we can put into our designs, so that they’re the most often experience that we can provide.
Aaron Pearlman: Speaking of handling focus, the last one that we are going to go into is focus handling itself. And we saw one example of it, what can happen if focus can get lost in certain types of handling? But rather than being just something that can be a significant issue, the way that you handle focus can change significantly the experience that an individual would have. Really the rule about handling focus, especially with the two instances that we’re going to look at right now, which are, removing and adding elements to your work space or whatever you’re working in is that … It can definitely change how somebody interacts with it. And so we want to make it follow the expected experience that you would have for somebody who is a Mouse-Only user or a sighted user, a Mouse-Only user I should say.
Aaron Pearlman: In this instance we’re going to look at … for here we’re going to look at … Okay, let me drag it over. Hold on one second. I’m going to have to take this out of here temporarily. There we go. So you shouldn’t be able to see an example of a modal that I’ve designed, it’s actually a single modal, we have two kind of images of it and just one is just showing what’s below the fold there rather than making one really, really wrong or I just split it up so you could see what was below in fold. And on the right side, if you look, there’s a trashcan icon that is currently being focused. And so when we click on that trash can icon, assuming that there isn’t a dialogue that says, “Are you sure you want to delete it?”
Aaron Pearlman: Let’s just assume that that’s not the case. The real question then goes, what happens with focus there? Because when that trash can icon is hit or is selected, it is going to remove instructions that are in right here, and it’s also going to remove itself. So where does focus go? So we as designers, we want to choose where focus goes because otherwise the browsers going to choose for focus goes if you’re making a web application inside of a web application and we don’t want the browser to choose where focus goes because it tends to throw things to the body. So in this case, where we really want focus to go is we want focus to go to the next focusible element, not necessarily the … what I would call the analog to that, which will be focusing the next trash can, the trash can for instructions to instead we focus instructions to itself.
Aaron Pearlman: And the reason we would want to do that, is you can imagine if somebody accidentally hit, using their keyboard only they hit return, then they hit return again. It would have just deleted two sets of instructions instead of one. And we would want to, we prevent that for a mouse only user by literally having those things physically far apart. But we want to also be able to prevent that because focus is what they’re using to traverse this. So I thought I’d show another example of what do we do when we’re deleting the last item in entire section here.
Aaron Pearlman: Now we’ve got cooking instructions, the final instruction for instruction one, where does focus goes here? Now for this particular one, it’s going to follow suit with what the previous one was, which is it’s going to go actually up to the next focus but filled again, which is ingredient one for the same reason that we wouldn’t want to throw it to the trashcan again because then if somebody again hit select again or hit return again, we would be … They’d accidentally delete two things that they unintended, didn’t want to.
Aaron Pearlman: For the same reason, we wouldn’t necessarily want to throw that to one of these links here because we would have the opposite problem where they’d be accidentally adding things as well. And we don’t necessarily want it to go to the body, because we go to the body and your Voice Over user, your Assistant Technology user, is just going to start chattering about the modal again or rather than letting you continue to interact and do what you intended to do.
Aaron Pearlman: And then finally, the final example that I have here is what do we do when we’re going to remove the last item in this case, in the modal here, there’s nothing left. Where would I send it? And this is definitely up to the discretion of the designers to where it should go. There’s no, it’s not going to be inaccessible if you choose to send it to the clothes or send to focus maybe to the cancel. It doesn’t necessarily make it inaccessible, it’s just that, it really comes down to what would you expect? What information would you want to convey? What narrative do you want to convey to that user and where we choose to send it as we choose to send it back to the header to let the user know that they’re still on the modal, they’re still there, we haven’t closed it on them, for example there.
Aaron Pearlman: And so that’s actually a programmatic shift because like I said, it’s not terrible voice. It’s not as terrible focusible element like that. So we programmatically shift focus to that in this particular example. So those are some nice examples of what to do maybe with focus when you’re removing items. So I thought you could … I would show an example of what you do when you’re adding an item. So I’ve got example of that real quick here for focus retention.
Aaron Pearlman: And right here, we’re going to hit this add another … you can just focus here, add another ingredient and focus then shifts to the actual ingredient in this case, the field that you added for two reasons, one, because the assumption is by adding that next field that we wanted to interact with it and that would be the expected behavior if I was a Mouse-Only user, I’d be adding that presumably so that I could actually begin to type text into it.
Aaron Pearlman: And then again, we wouldn’t necessarily want to keep focus on another ingredient for the same reason that if they hit return again, we wouldn’t want to add two ingredients instead of one. It should be opposite problem of the previous example. And the final, the final example I wanted to show, because I think it might be worthwhile showing is … actually I have that example, I may pull that up in a little bit. But I can describe it pretty, pretty aptly in that, if you have what do you do when you evoke a modal? For example, you saved something, the modal goes away, where does focus now go and what we tend to do, but the rule of thumb on that is that you want to send it back to whatever element [inaudible 00:31:03] gets.
Aaron Pearlman: So if you imagine if you had a little edit pencil and you select it, opens up the modal, you fill out that modal, you hit save, you’d want to send focus back to that interactive element that tends to be … or we do. There may be instances where you want to send it somewhere else. If it’s a wizard and it goes somewhere else after that, again to the discretion of the designer, to what the narrative that you’re trying to tell us to where to go. But for things that are like the one … instance that I just described, which is very common. You evoke a modal, or you do something with it and it gets dismissed as a result of that and the context doesn’t necessarily change.
Aaron Pearlman: And you don’t want to send that focus back to where it was. And the reason for doing that is so that, a Keyboard-Only or Assistive Technology user can pick back up with where they are. Because remember they’re in that space and that space is somewhat linear as to how they traverse and especially when you’re using town to get through everything. So, I think we’re just about at 40 minutes, we just about at time for all the examples and things that I had. So I’m going to pass it back over to Scott.
Scott: Thanks Aaron. That was pretty awesome, and we do have a lot of questions from the attendee as well as a few from individually who couldn’t make it today because he’s traveling. So Poan who’s a regular attendee of our webinars asks, “When you’re removing items, shouldn’t we have an acknowledgement of the action and move the focus there and then move to the next element?”
Aaron Pearlman: when removing an item, should you have an … are you referring to like a notice like a toast or are you saying should you have a live region that is letting you know what’s happening? If you’re shifting focus to remove an item, like the ones that I just showed in that particular instance the evocation of that delete for example, should be adequate enough to let them know that they in fact deleted.
Aaron Pearlman: It should be gone. Also, if they’re using Voice Over, it’s going to pick that up as well. If you’re interacting with something and it’s making changes somewhere else, for example, like you did something and then it changed some metrics somewhere for example, you’re probably going to want to use a live region that does something politely to let them know that that’s happened. That’s something that’s sort of out of the purview of where you’re working in specifically. I hope that answers your question. It might be diving into something that’s a little bit more technical. I may need to follow up a little bit more with some of it, if we’re going to get into deep technical implementation stuff.
Scott: Perfect.
Aaron Pearlman: My developer, so they don’t steer you arrive but in general that tends to be the case. The example that I showed should be adequate. If you want it to because it’s a delete, you could have an interim part where you throw an alert and say, “Are you sure you want him to delete this?” Which case you’re just reinforcing it further what happening.
Scott: Great. So, yeah, try and keep the questions user experience focused. So from a user experience standpoint, how would you manage focus for notification messages?
Aaron Pearlman: Focus for a notification? I can show you one if you’d like to see.
Scott: Sure.
Aaron Pearlman: We can pick back random because we happen to have toasts, which are notifications. So I’m going to open up toasts here. So this is actually being focused right now. This toast is evoked and it is being focused right now and you can actually, as you can see, you can tab into the clause right here. So, it depends. So, if I finished something and I wanted to notify them that it’s been finished and I toasted it, then I want to focus it so that they can see that it’s been … that I’m communicating that information to them. So you want to shift focus to it.
Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”
Aaron Pearlman: For navigating slideshows?
Scott: [crosstalk 00:36:00]. Very specific.
Aaron Pearlman: Yes. So navigating slideshows. We don’t use them very often, so I’m going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that’s an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that’s an animation wise can’t animate for more than five seconds at a time and then the animation has to stop.
Aaron Pearlman: That may not be relevant to what you’re doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we’ll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you’re going to need to have proper alternative texts on them. Just the things that you would expect.
Aaron Pearlman: Off the top of my head, I don’t know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It’s a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they’re tricky, but that doesn’t mean that they can’t be done.
Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia’s asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.
Aaron Pearlman: Yes. The second one, I’m not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that’s something that our developers have encountered before and how they’ve gotten around it. So we’ll make a note of that and I’ll try and circle back. But for the first one what’s a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don’t want to have to do that.
Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I’m a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.
Scott: Okay. That’s a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it’s accessible, what are some the easy things that just they can check off the list right away.
Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you’re working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you’ll get it and you’ll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it’s meeting at 4.5 to one.
Aaron Pearlman: So that’s one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it’s an interactive element that it’s a passing color contrast.
Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.
Aaron Pearlman: That’s things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that’s our accessibility engine. It’s totally free. It’s a little extension for chrome and Firefox and just hit the run button and see what you find. It’s a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you’re on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It’s a great thing that we can do immediately.
Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you’ve been doing design and UX for so long, but you’ve only been doing accessibility for smaller period of time, so that catch your attention?
Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I’ve always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don’t know as a person that very much appeals to me. And so it was just a good fit to learn design. That’s really cool.
Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don’t not design accessible anymore. It’s like UX designers don’t design unless you’re being tongue in cheek, you’re not going to design something to have a really poor user experience. It’s going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can’t like not think about accessibility as I do designing and that’s a really, really cool thing.
Aaron Pearlman: It also affords you to start to think about things that you didn’t think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn’t know focus was a state that you had full control over as well.
Scott: Our industry there’s always a new trend that’s just kind of how it goes, that’s the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?
Aaron Pearlman: I don’t know if there’s anything that’s super trendy right now when I look at different sites and web applications that couldn’t be designed excessively. I think there are pitfalls that that we’ve been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That’s one. In general, just being mindful of the contrast for your text. It is rampant.
Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it’ll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that’s conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.
Aaron Pearlman: And what I mean by information that’s conveyed is if what’s being conveyed is that the person is doing something that’s, you wouldn’t necessarily describe it as a man standing. It could be that they’re playing baseball. Maybe that’s the important part. So make sure that the, that the, the alternative text matches with the intended information that’s trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn’t accurately describe what is trying to be portrayed.
Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don’t do a great job of being evoked on focus as well. And they don’t always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.
Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.
Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we’re doing wireframes and design of the onset of the project, they’re inherently not inaccessible. It doesn’t really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they’re done with it. Do you do audits throughout the process, at the end of the process? Like what’s the workflow with developers?
Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I’ll go through a discovery process. They’re going to be privy to that, they’re not going to see it when the design is fully finished.
Aaron Pearlman: They’re going to see it throughout the design. I’ll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I’ve done, some of these ability testing that I’ve done. So, hopefully at that point nothing’s really new to them that I’m not going to get any 11th hour that we can’t even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.
Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there’s a great resource that one of the designers from Adobe put together. I know there’s like a pdf, there may be. There’s like a sketch file as well in there, there may be an XD file as well.
Aaron Pearlman: I don’t think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It’s a really, really wonderful resource. It’s all included in here as well. That’s a great way of saying, “Here’s part of my prototype and here’s the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.
Aaron Pearlman: So that’s one thing that we do is I annotate my designs pretty heavily. Everything from the size of how certain things are supposed to be to the Hex codes or RGBA values for what’s supposed to look like and feel like. But then also, there are accessibility annotations that you can add to it too.
Aaron Pearlman: And then just communicating, looking through the builds as they go through, making sure things like if you made any custom focuses that those custom focuses, look great, check the color contrast, make sure that it’s coming through, that the font choices that you’ve had there are some fonts that when their weight is higher and they’re bigger. Their color contrast it doesn’t have to be a 4.5. It can actually be a little bit lower, but you just going to want to just keep an eye on those things. Just as you would keep an eye on the experience stuff as well. You’re going to want to keep an eye on that stuff that you’ve been mindful for and annotated in your designs.
Scott: So we have a couple minutes left here. So I’ll ask one more question. Some people feel accessibility can stifle creativity throughout the design process. Is that something that you’ve come across? How do you think creativity fits into accessible design?
Aaron Pearlman: Sure. That was one of my initial reactions to having to design accessibly, was that somebody basically put the handcuffs on me and says, “There’s a much smaller box you have to be able to work in.” It’s true that designing accessibly means that there can be some more challenges because there’s more rules that you have to follow. But in the end, I found that the experience ends up being better and I haven’t … Once I removed that misnomer and began to do more and more accessible designs that were WCAG 2.0 AA accessible, I noticed that I can pretty much do everything that I wanted to do.
Aaron Pearlman: I would just need to sometimes express or solve problems in a slightly different way than I did before. I think a lot of people when they think about designing accessibly … I’ll give you a very specific example. When they think about designing accessibility they think, “Oh, well, I can’t do all of these fancy visualizations, for example. I’m not going to be able to do all of those things because they’re not going to be accessible, because if an individual can’t see them, I’m not going to be able to do that.”
Aaron Pearlman: I was designing a visualization that was just basic, just sort of line graph and under those, there was a line graph, on the x axis there was I think it was time and on the y axis it was usage or something like that. And there was this nice little gradient that went down from it and there was sort of these light lines that went behind it to delineate the months and time. And when I talked with one of my subject matter experts about making it accessible, it turned out I was sure he was just going to be like, “Nope.” But he said that there was actually just a few things that I needed to do to make this really nice looking graph accessible. One, that line at the top it need to pass color contrast because that’s actually what’s conveying the information of the trend over time.
Aaron Pearlman: The gradiated stuff underneath it’s just decoration and as long as it’s not interrupting the passing of color contrast of that and the y and x axis lines and ended up being okay. Those lines behind it were okay, but I ended up adding tick marks at the bottom there to indicate that. And then when I hovered and focused over, because sometimes you can hover over and it’ll add a dot to part of the line graph, just making sure that the dot itself would pass color. contrast. I did that by doing the sort of donut thing where you put a white dot with another dot or I should say has it like a large stroke on the outside of it as well.
Aaron Pearlman: And then I added a little bit of treatment in there that would bring the those lines that were faded back forward. And it all pass color contrast and ended up being fine. It was really pretty visualizations that passed. Now granted, I’m not getting into all of the accessible name stuff and being able to do that. Many libraries are on that. Put that aside, at least we call a contrast because is where I think a lot of designers struggle with. You can do it.
Aaron Pearlman: It’s just about being really mindful about those types of things, and getting more examples and just trying and trying different things, and having other people that you can pitch those ideas with and bounce them back and forth and checking again, just really do that. I don’t think it really inhibits anything. It just makes you have to think a little bit more clearer about how you’re going to do it and making sure that you’re looking through the lens of how an individual engaged with this if they had low vision, or if they couldn’t see it at all or couldn’t hear if you’re building a media application.
Scott: One more question, but I think we should’ve touched upon it. What stage in your process do you start thinking about accessibility? I’m going to assume throughout the whole process.
Aaron Pearlman: Yeah, it is throughout the whole process. I’ll be a little bit more rather than … I know who I say that and it sounds a little flippant. So, early on when you’re doing things like low fidelity prototyping, you’re going to be thinking about things like some tab order stuff. You’re going to be thinking about maybe headings and structure, things like that. Those are the type of accessibility stuff that you think about. Later on as it gets higher in fidelity, you’re going to be thinking about things more like, colors and your pallets that you’ve chosen, maybe accessible names, alternative text for anything that may merit that, you may be thinking about, if you’re doing any custom focuses, for example, that’s probably where you’re going to start to think about that.
Aaron Pearlman: It doesn’t mean that you couldn’t think about it when you’re doing low fidelity just means in general, when I go through my process those things tend to fall into those categories. You’re thinking about accessibility the whole time, but you’re not always thinking about everything with it as you’re in lower fidelity stuff, and you’re ideating, and you’re just thinking about ideas, and you’re just working through ideas, let that creative stuff go through as you become more attuned to accessibility, it will just sort of intrinsically make its way in and there’ll be less of a conscious thing.
Scott: Yeah. Fair enough. Well, on that note, we’ve run out of time, Aaron. Thank you very much for your time and—
Aaron Pearlman: That was great. I’ve had a wonderful time.
Scott: You’re going to be at the next couple of Smashing conferences, I think.
Aaron Pearlman: I will be at the one in New York. I’ll be at the one in New York.
Scott: Okay. And are you guys doing a workshop there?
Aaron Pearlman: Yes, we’re.
Scott: Okay. Awesome. Well thank you again for your time and just to let see the members that are still watching, we’ve two webinars next week. The first one is the Power of Digital People, with Kristina Podnar. And then we have a number three in our series with Andrew Clarke, Inspired Designs Decisions, number three inspired by Ernest Joural. Thank you very much everybody for attending today. And again, this recording will be available in dispatching membership panel once we’re done editing it and we hope to see you all next week. So thanks again Erin.
That’s A Wrap!
We kindly thank Smashing Members from the very bottom of our hearts for their continuous and kind support — and we can’t wait to host more webinars in the future.
We couldn’t be happier to welcome Aaron to our upcoming SmashingConf New York (October 15-16) — we’d love to see you there as well!
Please do let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it.
It’s nearly 2020, and every eCommerce brand should be using key metrics to pinpoint advertising, boost sales and improve fulfillment.
Emma Miller, Senior Editor at Bizzmark, calls metrics the “one thing that can make or break your online presence.” She goes on: “To succeed in the competitive online market, you need to set measurable goals, choose the right metrics to track, and analyze your online performance continuously.”
Making the Connection: Advertising Metrics
There are dozens of different advertising metrics you can track across many different channels and platforms. Some for search, others for social and still others for paid advertising.
According to one guide from Klipfolio, setting up measurable marketing metrics can help you track digital marketing performance across SEO, social media growth and more: “With such a wide variety of channels being used, it’s important for marketing teams to actively track progress and performance in real-time with the right marketing metrics.”
So which are the ‘right’ marketing metrics? These are the five we recommend eCommerce brands start with.
Marketing Attribution: Identify where your traffic is coming from — organic search traffic or a paid ad? Are people browsing from a mobile or desktop device?
Click-Through Rate: You’re getting your message out, but is it landing? Look at how often people click for emails, social campaigns, PCC, and more.
Returning Visitors: Are you building a following or just getting people passing through? Returning visitors is a good indication that your marketing content is working — you’ll just need to make a few tweaks to boost actual conversion.
Funnel Abandonment: Highlight where you can optimize based on where people are abandoning their journey. Was it on the second drip email? Once they reached the landing page?
Selling Your Brand: Storefront Metrics
Marketing and sales are more connected than ever before, so some of these sales metrics overlap with advertising metrics. Track these KPIs to see how well your storefront is doing once people land there.
Bounce Rate: How many people leave your site after just one page? If this number is high, you should rethink your website design and content to encourage visitors to stick around.
Customer Lifetime Value: Think of this as customer retention. Include: segmented revenue. The higher your purchase frequency and the larger your customer base, the more critical your LTV will be for your business to factor in future decisions.
Pageviews: Are you reaching the people you want to reach? Looking at pageviews relative to your other marketing metrics will give you an instant snapshot of effectiveness.
Cart Abandonment: You’ve reached your audience, brought them to your site, shown them your products, encouraged them to ‘add to cart’ — only for them to abandon before payment is processed. What went wrong? eCommerce brands often make the checkout process too difficult or tack on surprise shipping fees, causing customers to abandon ship. If your cart abandonment rate is high, it’s time to reassess your checkout and account creation process.
Bringing it Home: Shipping Metrics
Context: Your relationship with customers doesn’t end once you make a sale. How can you improve their experience through the last mile?
Inventory Accuracy: An ‘out of stock’ message is a good way to get customers to never come back to your store. Be sure that the stock you list online is reflective of your actual inventory.
On-time Delivery: Want great customer reviews? Fast and reliable delivery is on the top of everyone’s lists these days, so be sure to keep this number as high as possible.
Return Rate: This one covers all of your bases, depending on the reason for the return. If the rate is high, dig into where these returns are coming from and how you can improve satisfaction from the jump.
As a bonus, look at Net Promoter Score as a good final indicator and relevant metric. NPS takes into account ad effectiveness, storefront engagement, and shipping satisfaction, bringing all three areas under one roof.
Multichannel: Bringing Marketing, Storefront and Fulfillment Together
With multichannel eCommerce, you can’t separate out marketing efforts from your sales or your inventory management from your sales. Your efficiency in marketing will affect the size of your sale, the size of your sale will affect your shipping costs, your shipping costs will affect your profitability, your profitability will affect your ad spend… you get the idea, right?
They are all interconnected, and you should treat them as such.
To keep things straight in multichannel eCommerce, you’ll need two things: a short list of critical KPIs for your eCommerce brand and a way to visualize how these metrics interplay, ultimately affecting your bottom line. You can use the metrics identified above as a starting point, and narrow them down based on what is most important to your brand.
Changing your mindset to think of marketing, sales and fulfillment as part of the same entity is one thing. But actually bringing them under one roof is another.
Having the platforms separate doesn’t mean your metrics have to remain in a silo. You can use a profit analytics dashboard, for example, to bring together the most relevant metrics for advertising, sales and fulfillment. Monitoring your profit and marketing performance in eCommerce shouldn’t be hard — and a single dashboard for all your metrics makes it easier.
You work a while on a side project. You think it’s pretty cool! You decide to release it into the world. And then… it goes well. Or it doesn’t go well. Wait, is that right? You forgot to add analytics — it just didn’t cross your mind at the time. Now you’re pretty curious how many people have been visiting the site, but… you’re not sure. Enter Netlify Analytics.
There are so many times where I:
Forget to add analytics
Don’t want to incur the extra page weight, or
I’m concerned with privacy issues
I released a CSS Grid Generator last month and I forgot to add analytics. The release went well, but now it’s a bit of a black box for me as far what happened there or if I need to adjust a release in the future. Now, however, I can enable Netlify Analytics and see into the past without having lost any information. Sweet.
Netlify Analytics doesn’t have a ton of bells and whistles — it’s not meant to be a replacement for super comprehensive marketing tools. But if you want to get some data about your site without adding a lot of scripts, it can be a handy tool.
One really nice thing about it is the accuracy. Since the data is coming from the server, you can have a clear picture of what the server actually served, rather than relying on a third party which might have varied reporting due to things like add blockers that can skew client-side reporting (15% of users are estimated to use tools like Ghostery, for instance), caching, and other factors.
The Analytics Dashboard
The dashboard for each site shows some “at a glance” information:
Then you can dive into more detailed information by specific date:
There’s a bit of information from top sources and top pages:
There’s an area for “Top Resources Not Found”, which shows any pages, images, anything that your visitors are trying and failing to retrieve from your site. When I enabled it on mine, I was able to fix a broken resource that I had long forgotten about.
It’s going to be awesome being able to check how some of my dev projects are doing. But I’m also really excited to take that extra implementation step out of my work. The caveats to keep in mind is that your site needs to be hosted by Netlify in order to use the Analytics tools, and it’s a paid feature. Any site you enable will show up to 90 days (3 billing cycles) in the “Bandwidth used” chart, and up to 30 days in all other charts if it’s old enough, however it could take up to 2 days between when you enable analytics and when your dashboard is calculated and populated.
Under the hood
The analytics dashboard itself is built with React and Highcharts. Highcharts is a JavaScript charting library that includes responsive options and an accessibility module. All of the components consume data from our internal analytics API.
Before development began, we conducted an internal comparison survey of data visualization libraries in order to choose the best one for our needs. We landed on Highcharts over other popular options like d3.js, primarily because it means any engineer at Netlify with JavaScript experience can jump in and contribute, whether they have deep SVG and D3-specific knowledge or not.
While the charts themselves are rendered as SVG elements, Highcharts allows you to render any text inside the graph using HTML, simplifying and speeding our development time and allowing us to use CSS for advanced styling. The Highcharts docs are also top notch and offer a ton of customization options through their declarative API.
We used the Highcharts wrapper for React in order to create reusable React components for each type of graph. The “Top sources,” “Top pages,” and “Top resources not found” cards use a different component that displays a
using the data passed in as props.
One of the trickier challenges we encountered on the UI side while building these graphs was displaying dates along the X axis of the area charts in a way that wouldn’t look overwhelming.
Highcharts offers an option to customize the format of an axis label using a JavaScript callback function, so we hooked into that to display every other date as a label. From there, we wrote an algorithm to capture the first date of each month that was being displayed and add the month name into the markup for the label, making the UI a bit cleaner and easier to digest.
Other Analytics Alternatives, with Snippets
If you’d still like to run third-party scripts and other kind of analytics, Netlify has capabilities to add something globally to or tags. This is useful because, depending on how your site is set up, it can be a bit of a pain to add third-party scripts to every page. Plus, sometimes you want to give the ability to change these scripts to someone who doesn’t have access to the repo. Go to the particular site in the dashboard, then Settings ? Build & Deploy ? Post processing.
That’s where you will find Snippet Injection:
Click “Add snippet” and you’ll be able to select whether you want to add the third-party snippet to the or the tag, and you’ll have a change to post your code in HTML. For example, if you need to add Google Analytics, you’d wrap it in a script tag like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-68528-29"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-XX');
</script>
You’ll also name it so that you can keep track of it. If you need to add more later, this is helpful.
That’s it!
You’re off and running with either the new Netlify Analytics offering that’s built-in or a more robust tool.
Zach Leatherman worked closely with Chris to figure out the font loading strategy for this very website you’re reading. Zach walks us through the design in this write-up and shares techniques that can be applied to other projects.
Spoiler alert: Font loading is a complex and important part of a project.
The really interesting part of this post is the way that Zach talks about changing the design based on what’s best for the codebase — or as Harry Roberts calls it, “normalising the design.” Is a user really going to notice the difference between font-weight: 400 and font-weight: 500? Well, if we can ditch a whole font file, then that could have a significant impact on performance which, in turn, improves the user experience.
I guess the conversation can instead be framed like this: Does the user experience of this font outweigh the user experience of a slightly faster website?
And this isn’t a criticism of the design at all! I think Zach shows us what a healthy relationship between designers and developers can look like: collaborating and making joint decisions based on the context and the problem at hand, rather than treating static mockups as the final, concrete source of truth.
Proponents of the IndieWeb offer a fairly straightforward analysis of our current social-media crisis. They frame it in terms of a single question: Who owns the servers? The bulk of our online activity takes places on servers owned by a small number of massive companies. Servers cost money to run. If you’re using a company’s servers without paying for the privilege, then that company must be finding other ways to “extract value” from you.
As I understand it, the core concept is running your own website where you are completely in control, as opposed to publishing content you create on a third-party website. It doesn’t say don’t use third-party websites. It just says syndicate there if you want to, but make your own website the canonical source.
Don’t tweet, but instead write a short blog post and auto-post it to Twitter. Don’t blog on Medium, but instead write on your own blog and plop it over to Medium. Like that. In that way, you’re getting the value of those services without giving anything up.
clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.
We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.
But first, let’s do a quick recap of what we’re working with.
Clip-path crash course
Just for a quick explanation as to what the clip-path is and what it provides, MDN describes it like this:
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Consider the circle shape provided by clip-path. Once the circle is defined, the area inside it can be considered “positive” and the area outside it “negative.” The positive space is rendered while the negative space is removed. Taking advantage of the fact that this relationship between positive and negative space can be animated provides for interesting transition effects… which is what we’re getting into in just a bit.
clip-path comes with four shapes out of the box, plus the ability to use a URL to provide a source to some other SVG element. I’ll let the CSS-Tricks almanac go into deeper detail, but here are examples of those first four shapes.
Shape
Example
Result
Circle
clip-path: circle(25% at 25% 25%);
Ellipse
clip-path: ellipse(25% 50% at 25% 50%);
Inset
clip-path: inset(10% 20% 30% 40% round 25%);
Polygon
clip-path: polygon(50% 25%, 75% 75%, 25% 75%);
Combining clippings with CSS transitions
Animating clip-path can be as simple as changing the property values from one shape to another using CSS transitions, triggered either by changing classes in JavaScript or an interactive change in state, like :hover:
It only affects what is rendered and does not change the box size of the element as relating to elements around it. For example, a floated box with text flowing around it will still take up the same amount of space even with a very small percentage clip-path applied to it.
Any CSS properties that extend beyond the box size of the element may be clipped. For example, an inset of 0% for all four sides that clips at the edges of the element will remove a box-shadow and require a negative percentage to see the box-shadow. Although, that could lead to interesting effects in of itself!
OK, let’s get into some light animation to kick things off.
Comparing the simple shapes
I’ve put together a demo where you can see each shape in action, along with a little explanation describing what’s happening.
The circle shape is resized in the leave transition from an initial 75% radius (just enough to allow the element to appear fully) down to 0%. Since no position is set, the circle defaults to the center of the element both vertically and horizontally. The enter transition plays the animation in reverse by means of the “reverse” keyword in the animation property.
Ellipse
clip-path: ellipse(<length|percentage>{2} at <position>);
Ellipse accepts three properties that can be animated:
Shape radius: can be a length or percentage on the horizontal axis
Shape radius: can be a length or percentage on the vertical axis
Position: can be a length or percentage along the x and y axis
The ellipse shape is resized in the leave transition from an initial 80% by 80%, which makes it a circular shape larger than the box, down to 0% by 20%. Since no position is set, the ellipse defaults to the center of the box both vertically and horizontally. The enter transition plays the animation in reverse by means of the “reverse” keyword in the animation property.
The effect is a shrinking circle that changes to a shrinking ellipse taller than wide wiping away the first element. Then the elements switch with the second element appearing inside the growing ellipse.
The inset shape has up to five properties that can be animated. The first four represent each edge of the shape and behave similar to margins or padding. The first property is required while the next three are optional depending on the desired shape.
Length/Percentage: can represent all four sides, top/bottom sides, or top side
Length/Percentage: can represent left/right sides or right side
Length/Percentage: represents the bottom side
Length/Percentage: represents the left side
Border radius: requires the “round” keyword before the value
One thing to keep in mind is that the values used are reversed from typical CSS usage. Defining an edge with zero means that nothing has changed, the shape is pushed outward to the element’s side. As the number is increased, say to 10%, the edge of the shape is pushed inward away from the element’s side.
The inset shape is resized in the leave transition from a full-sized square down to a circle because of the rounded corners changing from 0% to 50%. Without the round value, it would appear as a shrinking square. The enter transition plays the animation in reverse by means of the “reverse” keyword in the animation property.
The effect is a shrinking square that shifts to a shrinking circle wiping away the first element. After the elements switch the second element appears within the growing circle that shifts to a growing square.
Polygon
clip-path: polygon(<length|percentage>);
The polygon shape is a somewhat special case in terms of the properties it can animate. Each property represents vertices of the shape and at least three is required. The number of vertices beyond the required three is only limited by the requirements of the desired shape. For each keyframe of an animation, or the two steps in a transition, the number of vertices must always match for a smooth animation. A change in the number of vertices can be animated, but will cause a popping in or out effect at each keyframe.
The eight vertices in the polygon shape make a square with a vertex in the four corners and the midpoint of all four sides. On the leave transition, the shape’s corners animate inwards to the center while the side’s midpoints animate inward halfway to the center. The enter transition plays the animation in reverse by means of the “reverse” keyword in the animation property.
The effect is a square that collapses inward down to a plus shape that wipes away the element. The elements then switch with the second element appears in a growing plus shape that expands into a square.
Let’s get into some simple movements
OK, we’re going to dial things up a bit now that we’ve gotten past the basics. This demo shows various ways to have movement in a clip-path animation. The circle and ellipse shapes provide an easy way to animate movement through the position of the shape. The inset and polygon shapes can be animated in a way to give the appearance of position-based movement.
The slide down transition consists of two different animations using the inset shape. The first, which is the leave animation, animates the top value of the inset shape from 0% to 100% providing the appearance of the entire square sliding downward out of view. The second, which is the enter animation, has the bottom value at 100% and then animates it down towards 0% providing the appearance of the entire square sliding downward into view.
As you can see, the number of sides being defined in the inset path do not need to match. When the shape needs to be the full square, a single zero is all that is required. It can then animate to the new state even when the number of defined sides increases to four.
Box-Wipe
The box-wipe transition consists of two animations, again using the inset shape. The first, which is the leave animation, animates the entire square down to a half-size squared positioned on the element’s left side. The smaller square then slides to the right out of view. The second, which is the enter animation, animates a similar half-size square into view from the left over to the element’s right side. Then it expands outward to reveal the entire element.
When the full element is shown, the inset is at zero. The 50% keyframes define a half-size square that is placed on either the left or right. There are two values representing the left and right edges are swapped. Then the square is then moved to the opposite side. As one side is pushed to 100%, the other must go to -50% to maintain the shape. If it were to animate to zero instead of -50%, then the square would shrink as it animated across instead of moving out of view.
Rotate
The rotate transition is one animation with five keyframes using the polygon shape. The initial keyframe defines the polygon with four vertices that shows the entire element. Then, the next keyframe changes the x and y coordinates of each vertex to be moved inward and near the next vertex in a clockwise fashion. After all four vertices have been transitioned, it appears the square has shrunk and rotated a quarter turn. The following keyframes do the same until the square is collapsed down to the center of the element. The leave transition plays the animation normally while the enter transition plays the animation in reverse.
Polygons can be animated into any other position once its vertices have been set, as long as each keyframe has the same number of vertices. This can make many interesting effects with careful planning.
Spotlight
The spotlight transition is one animation with five keyframes using the circle shape. The initial keyframe defines a full-size circle positioned at the center to show the entire element. The next keyframe shrinks the circle down to twenty percent. Each following keyframe animates the position values of the circle to move it to different points on the element until it moves out of view to the left. The leave transition plays the animation normally while the enter transition plays the animation in reverse.
All of these examples make heavy use of the polygon shape. They take advantage of features like stacking vertices to make elements appear “welded” and repositioning vertices around for movement.
The chevron transition is made of two animations, each with three keyframes. The leave transition starts out as a full square with six vertices; there are the four corners but there are an additional two vertices on the left and right sides. The second keyframe animates three of the vertices into place to change the square into a chevron. The third keyframe then moves the vertices out of view to the right. After the elements switch, the enter transition starts with the same chevron shape but it is out of view on the left. The second keyframe moves the chevron into view and then the third keyframe restores the full square.
The spiral transition is a strong example of a complicated series of vertices in the polygon shape. The polygon is created to define a shape that spirals inward clockwise from the upper-left of the element. Since the vertices create lines that stack on top of each other, it all appears as a single square. Over the eight keyframes of the animation, vertices are moved to be on top of neighboring vertices. This makes the shape appear to unwind counter-clockwise to the upper-left, wiping away the element during the leave transition. The enter transition replays the animation in reverse.
The slots transition is made of a series of vertices arranged in a pattern of vertical slots with vertices stacked on top of each other for a complete square. The general idea is that the shape starts in the upper-left and the next vertex is 14% to the right. Next vertex is in the exact same spot. Then the one after that is another 14% to the right, and so on until the upper-right corner is reached. This creates a series of “sections” along the top of the shape that are aligned horizontally. The second keyframe then animates every even section downward to the bottom of the element. This gives the appearance of vertical slots wiping away their parts of the element. The third keyframe then moves the remaining sections at the top to the bottom. Overall, the leave transition wipes away half the element in vertical slots and then the other half. The enter transition reverses the animation.
The shutters transition is very similar to the slots transition above. Instead of sections along the top, it creates vertical sections that are placed in line with each other to create the entire square. Starting with the upper-left the second vertex is positioned at the top and 20% to the right. The next vertex is placed in the same place horizontally but is at the bottom of the element. The next vertex after that is in the same spot with the next one back at the top on top of the vertex from two steps ago. This is repeated several times across the element until the right side is reached. If the lines of the shape were visible, then it would appear as a series of vertical sections lined up horizontally across the element. During the animation the left side of each section is moved over to be on top of the right side. This creates a wiping effect that looks like vertical shutters of a window. The enter transition plays the animation in reverse.
The star transition takes advantage of how clip-path renders positive and negative space when the lines defining the shape overlap and cross each other. The shape starts as a square with eight vertices; one in each corner and one on each side. There are only three keyframes but there’s a large amount of movement in each one. The leave transition starts with the square and then moves each vertex on a side to the opposite side. Therefore, the top vertex goes to the bottom, the bottom vertex goes to the top, and the vertices on the left and right do the same swap. This creates criss-crossing lines that form a star shape in the positive space. The final keyframe then moves the vertices in each corner to the center of the shape which makes the star collapse in on itself wiping the element away. The enter transition plays the same in reverse.
OK, so we’ve looked at a lot of examples of animations using clip-path shape functions. One function we haven’t spent time with is path. It’s perhaps the most flexible of the bunch because we can draw custom, or even multiple, shapes with it. Chris has written and even spoken on it before.
So, while I created demo for this set of examples as well, note that clip-path paths are experimental technology. As of this writing, it’s only available in Firefox 63 or higher behind the layout.css.clip-path-path.enabled flag, which can be enabled in about:config.
This demo shows several uses of paths that are animated for transitions. The paths are the same type of paths found in SVG and can be lifted from the path attribute to be used in the clip-path CSS property on an element. Each of the paths in the demo were actually taken from SVG I made by hand for each keyframe of the animations. Much like animating with the polygon shape, careful planning is required as the number of vertices in the path cannot change but only manipulated.
An advantage to using paths is that it can consist of multiple shapes within the path, each animated separately to have fine-tune control over the positive and negative space. Another interesting aspect is that the path supports Bézier curves. Creating the vertices is similar to the polygon shape, but polygon doesn’t support Bézier curves. A bonus of this feature is that even the curves can be animated.
That said, a disadvantage is that a path has to be built specifically for the size of the element. That’s because there is no percentage-based placement, like we have with the other clip-path shapes . So, all the demos for this article have elements that are 200px square, and the paths in this specific demo are built for that size. Any other size or dimensions will lead to different outcomes.
Alright, enough talk. Let’s get to the examples because they’re pretty sweet.
Iris
The iris transition consists of four small shapes that form together to make a complete large shape that splits in an iris pattern, much like a sci-fi type door. Each shape has its vertices moved and slightly rotated in the direction away from the center to move off their respective side of the element. This is done with only two keyframes. The leave transition has the shapes move out of view while the enter transition reverses the effect. The path is formatted in a way to make each shape in the path obvious. Each line that starts with “M” is a new shape in the path.
The melt transition consists of two different animations for both entering and leaving. In the leave transition, the path is a square but the top side is made up of several Bézier curves. At first, these curves are made to be completely flat and then are animated downward to stop beyond the bottom of the shape. As these curves move downward, they are animated in different ways so that each curve adjusts differently than the others. This gives the appearance of the element melting out of view below the bottom.
The enter transition does much the same, except that the curves are on the bottom of the square. The curves start at the top and are completely flat. Then they are animated downward with the same curve adjustments. This gives the appearance of the second element melting into view to the bottom.
The door transition is similar to the iris transition we looked at first — it’s a “door” effect with shapes that move independently of each other. The path is made up of four shapes: two are half-circles located at the top and bottom while the other two split the left over positive space. This shows that, not only can each shape in the path animate separately from each other, they can also be completely different shapes.
In the leave transition, each shape moves away from the center out of view on its own side. The top half-circle moves upward leaving a hole behind and the bottom half-circle does the same. The left and right sides then slide away in a separate keyframe. Then the enter transition simply reverses the animation.
This transition is different than most of the demos for this article. That’s because other demos show animating the “positive” space of the clip-path for transitions. It turns out that animating the “negative” space can be difficult with the traditional clip-path shapes. It can be done with the polygon shape but requires careful placement of vertices to create the negative space and animate them as necessary. This demo takes advantage of having two shapes in the path; there’s one shape that’s a huge square surrounding the space of the element and another shape in the center of this square. The center shape (in this case an x or +) excludes or “carves” out negative space in the outside shape. Then the center shape’s vertices are animated so that only the negative space is being animated.
The leave animation starts with the center shape as a tiny “x” that grows in size until the element is wiped from view. The enter animation the center shape is a “+” that is already larger than the element and shrinks down to nothing.
The drops transition takes advantage of the ability to have multiple shapes in the same path. The path has ten circles placed strategically inside the area of the element. They start out as tiny and unseen, then are animated to a larger size over time. There are ten keyframes in the animation and each keyframe resizes a circle while maintaining the state of any previously resized circle. This gives the appearance of circles popping in or out of view one after the other during the animation.
The leave transition has the circles being shrunken out of view one at a time and the negative space grows to wipe out the element. The enter transition plays the animation in reverse so that the circles enlarge and the positive space grows to reveal the new element.
The CSS used for the drops transition is rather large, so take a look at the CSS section of the CodePen demo starting with the .drops-enter-active selector.
Numbers
This transition is similar to the x-plus transition above — it uses a negative shape for the animation inside a larger positive shape. In this demo, the animated shape changes through the numbers 1, 2, and 3 until the element is wiped away or revealed. The numeric shapes were created by manipulating the vertices of each number into the shape of the next number. So, each number shape has the same number of vertices and curves that animate correctly from one to the next.
The leave transition starts with the shape in the center but is made to be unseen. It then animates into the shape of the first number. The next keyframe animates to the next number and so no, then plays in reverse.
The CSS used for this is ginormous just like the last one, so take a look at the CSS section of the CodePen demo starting with the .numbers-enter-active selector.
Hopefully this article has given you a good idea of how clip-path can be used to create flexible and powerful animations that can be both straightforward and complex. Animations can add a nice touch to a design and even help provide context when switching from one state to another. At the same time, remember to be mindful of those who may prefer to limit the amount of animation or movement, for example, by setting reduced motion preferences.
Startup advice can be seductive. From motivational quotes to magazine profiles, there’s a persistent narrative that if you follow your passion, log 80 hours a week, and “hustle hard,” you’ll create the next Amazon or Airbnb.
It is possible.
We all know that hard work can produce incredible results. But the prevailing rise-and-grind mythology often pushes founders into business before they’re ready.
Many smart, ambitious people feel pressured to quit their jobs and go all-in. They work around the clock, sacrificing their health and happiness to chase a startup dream.
For every founder who’s battling exhaustion and surviving on protein bars, I’d like to suggest a different path.
It’s the same path that enabled me to build JotForm in a wildly competitive industry, where even Google is vying for our market share. Since 2006, we’ve grown to serve 4.2 million users and create a team of 130 employees?—?and we’ve done it without taking a penny in outside funding.
JotForm isn’t an overnight success story, and I certainly don’t have a private jet. But, I’ve built a business I love, while maintaining my freedom and a rich personal life.
Bootstrapping can be a great path for entrepreneurs of every kind. Here’s what we’ve learned?—?and how it can help you to achieve success on your own terms.
Why small is the new big?—?the case for bootstrapping
Many founders think venture capital is a prerequisite for success. Reports of record-breaking funding rounds and billion-dollar valuations can certainly make it seem that way.
But investment isn’t the only way to fund a business.
A growing number of founders, or “bootstrappers” are building their companies with little or no outside funding. They don’t have to fuss over investment decks and most could care less about reaching the top of TechCrunch . Very few worry about creating personal brands on Instagram?—?especially in the early stages. They’re more concerned about serving real customers, who support their ideas with hard-earned cash.
They might not be as visible as entrepreneurs who spend a fortune on PR agencies, but in every industry, you’ll find independent, self-funded companies that are also wildly profitable. For example:
MailChimp co-founder and CEO Ben Chestnut needed to create email newsletters for his design consulting clients. He built a tool to streamline this tedious process, and created a business worth $4.2 billion , with $600 million in annual revenues.
Todoist is a market leader in productivity, used by over 10 million people and organizations including Apple, Starbucks, Google. Amir Salihefendic launched its parent company, Doist, in 2007 and says “we’re running a marathon, not a sprint.”
Basecamp started in 2004, when Jason Fried and his web design firm needed a project management app to keep them organized. They built an internal tool, started using it with clients, and now have nearly 2.2 million customers and employees in 30 cities worldwide.
These are just a few businesses that are racking up customers and profits to rival their VC-backed competitors. One key difference? They get to call the shots about when, where and how they work?—?and grow. Many of the founders also build their empires quietly, with more concern for creating great products than generating market buzz.
Clearly, bootstrapping isn’t for everyone. Not every business can be self-funded, and sometimes, outside investment is exactly the right choice. We all need to chart our own paths. But bootstrappers remind us to question the prevailing startup narratives and ask, “Do we really need to raise VC money?”
It’s well worth taking a breath, setting the pitch deck aside for a moment, and considering an alternative route.
Self-funding vs raising money: pros and cons
Starting a business isn’t easy. There are risks, challenges, and complications, whether you leverage your own cash or you pursue venture capital. Reading headline after headline about record-setting funding rounds, however, can make VC backing look glamorous?—?and perhaps even necessary.
Most of us can name the well-funded success stories: Facebook, Google, WhatsApp, Alibaba, Rent the Runway, Uber, and more. But for every famous brand, there are thousands of VC-funded firms that quietly grew and then fizzled. That’s why it’s good to take a clear-eyed look at the statistics.
Research by Harvard lecturer Shikhar Ghosh reveals that about 75% of VC-backed companies in the U.S. fail, meaning they don’t return the investors’ capital. If we define failure as not delivering the projected return on investment, however, then more than 95% of startups fail, says Ghosh.
Just like a bicycle, a startup requires some speed to stay upright. But once a founder accepts outside cash, the clock really starts ticking.
Here’s another way to think about it. If VC funding is the fabled hare, then bootstrapping is the tortoise. It’s slow and steady, but it keeps on going (and going and going).
We know that premature scaling is the number one cause of startup failure. Eager new founders often drain their cash on big offices, the latest technology, splashy PR and marketing campaigns, and hiring full teams?—?long before they’re ready or even need the support. Sometimes their investors push for these outward signs of accomplishment.
Bootstrappers rarely face the same pressures. They don’t have to meet arbitrary timelines or show hockey stick growth charts. Instead, they have the freedom to set their own targets. They make the rules, and, most importantly, they decide what “success” looks like?—?even if that definition is constantly evolving.
Clearly, bootstrapping doesn’t eliminate all problems. To grow a business without external funding, you have to swim, or you’ll sink fast. You have to be creative and strategic, but that can also make you a better entrepreneur. Here are three more advantages of taking the self-funded route.
You learn by wearing all the hats
It doesn’t matter if you’re a designer, product engineer, developer, or a UX specialist. As a bootstrapped founder, you’re probably also shipping packages, answering calls, and writing social media posts. That’s how it goes. And while spending precious time on the “other stuff” can be frustrating, it ensures you understand every corner of the business. Once it’s time to hire someone for that role, you know exactly what to look for and what to avoid.
The classic (or clichéd) startup office is a former industrial space with exposed beams and high ceilings. It’s bright and it shows the company is Doing. Big. Things. Until a business truly needs that kind of space, however, it’s not a smart expense.
It’s easy to get distracted, but bootstrappers can make strategic choices, like using open-source software and upgrading later, if necessary. Or working from home, renting a desk in a co-working space, and doing the PR and accounting until you can afford to get help.
Remaining lean allows you to pivot
In the early stages of a startup, the business is still pliable. You can release a product, gather user feedback, and adapt to real market needs. That’s an advantage.
Instagram started as a check-in app called Burbn, until founders Kevin Systrom and Mike Krieger offered viral photo filters with a streamlined interface.
Slack was originally developed to support a now-defunct game called Glitch. Founder Stewart Butterfield soon realized that the internal messaging app, not the game, was the real opportunity.
YouTube was a dating site until founders Jawed Karim, Steve Chen, and Chad Hurley dropped the “singles” videos and opened the platform for all kinds of uploads.
When startups work obsessively to create the “ultimate” first release, they can also be tempted to argue with their customers?—?even when customers share honest feedback about what they want and need. That’s why staying lean and flexible can be a major business advantage.
How to get started with bootstrapping
5 Essential Stages You Have To Consider Before You Bootstrap a Business
Keep your day job
Start a side project
Share what you create
Always pursue problems, not passion
Stay close to your product
After college, I spent five years working as a programmer for a New York-based media company. I learned so much there: how my mentors accomplished their goals and how to collaborate with team members. I also saw how micromanagement destroys staff motivation. Most importantly, that’s where I got the idea for JotForm.
Both startup press and social media often advise founders to leap blindly into business as soon as they have an idea. That approach can work, but it’s a tough slog that kills lots of promising companies. Instead, there are five steps you can take?—?right now?—?to lay the foundation for lasting success.
1. Keep your day job
Writing a manifesto and leaving your job with a flourish, Jerry Maguire-style, might seem like a badass entrepreneurial move. Unfortunately, it didn’t even work for Jerry.
Most bootstrappers test the waters with a side project while they hold down a full-time gig. They leave the safety of a regular paycheck only when that side hustle can provide viable, long-term income. SpaceX, Apple, Product Hunt, Trello, WeWork, Craigslist and Twitter all started this way.
Never underestimate how much you can learn and accomplish in a 9-to-5 job?—?and let’s all agree to stop saying “day job” like it’s a four-letter word. Getting paid to sharpen your skills at a healthy, productive company can provide a great foundation for whatever you’re building.
2. Start a side project
At Google, employees can spend 20% of their time exploring new ideas or creative projects. This 20% time policy is well known in tech circles, but it’s a concept we can all apply to our work lives.
We can build entire businesses by tinkering on the side, but most importantly, side projects boost creativity. When there’s no pressure to meet a revenue target (or make any money at all), we’re free to play, explore and learn. It’s a great way to decide whether the project truly captures your imagination, and to gauge outside interest.
“The only way a side project will work is if people give themselves permission to think simple, to change their minds, to fail?—?basically, to not take them too seriously.
When you treat something like it’s stupid, you have fun with it, you don’t put too much structure around it. You can enjoy different types of success.”
We should never be afraid to invest time and energy into something that excites us; something that gets the blood pumping and our creativity flowing. Follow curiosity and see where it leads.
And if enabling “stupidity” doesn’t work, trying looking at the side project through a more scientific lens.
Don’t focus on the outcome or how the experiment will be received. Just start.
3. Share what you create
Even before it’s done, and long before it’s “ready,” we need to share our ideas. Show people what you’ve been working on?—?this was one of the strategies that helped us to land our first 1,000 users. Take them inside the experiments you’re running, no matter how early or unpolished.
Today, there are so many different and inexpensive ways to share. Pick your favorite platform?—?the one that feels natural, and where you spend time anyway. It could be a YouTube channel, an Instagram account, a podcast, or even a blog. I have my blog on Medium but it could be whatever other network that works for you.
The simple act of sharing can help you to:
Develop an engaged audience (even if it’s small) before you launch a startup or try to sell what you’re creating.
Refine your ideas. Explaining a concept to someone else is the quickest way to find invisible holes. Use that pre-launch time to get smarter and fill your own knowledge gaps.
Develop a solid track record. Business is more than a financial transaction; it’s built on trust. When you show the work and bring people along for the ride, they get to know you. They feel invested. They see that you’ve consistently shown up, provided valuable content, and followed through on what you started.
Keep learning. Stay hungry.
As we collect that paycheck and play with new ideas, it’s the perfect time to learn. Never before have there been so many expert voices and resources, right at our fingertips. We can take online courses, read blogs, watch videos, attend meetups, listen to interviews, and read books. Find mentors (both real and virtual) and soak up every bit of knowledge possible. Then, apply what you lean and keep experimenting.
4. Always pursue problems, not passion
Contrary to prevailing wisdom (and motivational quotes), the best startups aren’t driven by passion; they solve problems. We built JotForm to eliminate a friction point that I experienced firsthand, while working at the media company.
Back in the late ’90s, building custom web forms was tedious and time-consuming, so I envisioned a drag-and-drop tool that anyone could use. I knew people wanted the product, because it solved a problem we struggled with every day.
Investor and Y Combinator co-founder Paul Graham says the most successful business ideas share three common features: They’re something the founders themselves want, that they themselves can build, and that few others realize are worth doing.
“The verb you want to be using with respect to startup ideas is not ‘think up’ but ‘notice,’” writes Graham. “At YC we call ideas that grow naturally out of the founders’ own experiences ‘organic’ startup ideas. The most successful startups almost all begin this way.”
Ask yourself:
What problems have you experienced in the world?
What problems do you have with products, services, and even yourself?
Problems need smart solutions. Passion is just the icing on the cake.
Who needs this now?
The RXBar also came from a personal need. Company CEO and co-founder Peter Rahal wanted a deliciously simple protein bar free of chemicals or synthetic ingredients. So, he developed a nutritious bar that would satisfy the CrossFit-going, paleo-eating crowd?—?and himself.
Rahal and his business partner, Jared Smith, scratched their own itch. As Basecamp founders Jason Fried and David Heinemeier Hansson write in their bestselling book, Rework, “the easiest, most straightforward way to create a great product or service is to make something you want to use.”
Once you have a prototype, it’s time to ensure you have an eager customer today , not sometime in the future.
If you can’t answer the question, “who needs this right now?” it might not be a viable business. For example, Rahal kept re-mixing his recipes until they tasted incredible. He didn’t stop until he knew people would pay for the product?—?and he tested that threshold by selling the bars door to door, packaged only in Tupperware.
5. Stay close to your product
Using what you create can be a game-changer. And it sounds so simple; after all, who wouldn’t use the product they built? But a startup has so many moving parts that founders can quickly become detached from their original mission.
Once a product or service is shipping, it’s important to stay close to the heart of your offering. Use it, consume it, order it, and dig into the details. Engagement puts you back in the customer’s shoes, so you experience any problems firsthand. It also keeps the team (no matter how small) on its toes.
Additionally, If the startup was built to scratch your own itch, there are always more opportunities to extend the solution. Ask yourself:
How else could this product serve me, personally?
What would make this solution more valuable?—?both to current and potential customers?
Very few problems in life are tackled once and solved forever. Startups aren’t stagnant, either. They need to evolve with needs, culture and markets. When you keep mining the problem (and the solution), it can keep the business fresh and vibrant.
Should you commit to a co-founder?
Sonny and Cher. Bert and Ernie. Calvin and Hobbes. Thelma and Louise.
Pop culture loves a good duo. So does the startup world.
Investors like Paul Graham often want to back businesses run by partners with complementary skills. Apple, for example, paired the late, sales-savvy Steve Jobs with Steve Wozniak, who focused on technology.
But when co-founders don’t gel, the results can be disastrous. “Startups do to the relationship between the founders what a dog does to a sock,” says Graham. “If it can be pulled apart, it will be.”
According to Noam Wasserman, a professor at Harvard Business School, 65% of high-potential startups fail due to conflict among the founders. Wasserman studied 10,000 entrepreneurs for his book, The Founder’s Dilemma, and suggests that multiple founders bring more skills to the table, but they also have more potential for disputes over money, strategy, leadership, credit, and other issues.
It makes sense. Multiple founders can get behind the wheel, but they have to agree on the destination, plus everything from who’s in the back seat to the best driving route. Many founders also have a strong desire for freedom, which can quickly feel stifled when someone else weighs in on every detail.
Sign on all the dotted lines
“Picking a co-founder is your most important decision,” says Naval Ravikan, co-founder of the AngelList platform. “It’s more important than the product, market, and investors.”
Ravikan makes a bold statement. Not everyone would agree that the partnership matters more than the product?—?or the market. But starting a business is a massive commitment. You’re picking someone with whom to share your life’s work. You’ll also share money, space, risk, and a whole lot of time.
The right partnership is powerful. Working with the wrong person can feel heavy and frustrating (at the very least) and, in the worst case, it can destroy the business.
That’s why a founders’ agreement should be excruciatingly detailed. Hire an experienced lawyer, if you go this route, and plan for everything: equity breakdown, vesting schedules, intellectual property, termination clauses, and more. Ensure that everyone is clear on the terms and feels fully protected, should the partnership go south.
Forget what the VCs say?—?especially if you’re prepared to bootstrap. As Ravikan says, “if you’re compromising, keep looking. A company’s DNA is set by the founders, and its culture is an extension of the founders’ personalities.”
Entrepreneurs who do trust themselves to go solo are often rewarded with the ultimate freedom. Spanx founder Sara Blakely, for example, built a global company without a co-founder or any outside investment. At age 41, she became the youngest self-made female billionaire?—?and she still owns 100% of the company.
Entrepreneurs, of all people, should know that rules are meant to be broken. That’s half the fun. So, partner up or stay solo, but do it on your terms, with your eyes wide open.
Slow growth is the new hockey stick curve
4 Reasons to Grow Your Business Slowly
Focusing on profits creates freedom
You can build the right team, not a “right now” team
Moving slowly can make customers happy
There’s time and space for learning
Most startup experts worship at the altar of rapid expansion. They even have a pattern for it, called “hockey stick growth,” which occurs when revenues start out flat and then quickly shoot up to create that iconic curve.
“Aiming for hockey-stick growth, while being aware of the predictable stages of growth, is exactly what successful entrepreneurs should do,” writes entrepreneur Bobby Martin, author of The Hockey Stick Principles .
Investors dream about rapid growth, too. They want to recover their money fast, so they often pressure companies to expand quickly.
A hockey stick looks great on paper, but it typically requires the business to grow revenues first and figure out profits later. That can put the company at risk. Bootstrappers take the opposite approach. They sort out profits first and stay focused on that key goal.
Slow growth takes patience and a good dose of bravery. It’s normal to feel some FOMO as you watch other firms double, then triple their staff overnight. But slow growth can provide stability. It also enables founders to sleep well at night, spend time with the people they love, and create products that attract loyal, satisfied customers.
Here are four more reasons to take the slow road.
1. Focusing on profits creates freedom
Bootstrapping math is pretty simple: spend less than you earn and you can grow at your own pace. It’s simple, but it’s not effortless.
When we celebrate companies that raise millions and post huge vanity metrics, like user acquisitions, that math can seem almost too simple.
Glorifying hockey stick growth also implies that you can chase flashy numbers now and worry about profits later. In today’s market, it’s not uncommon to hear the question, “how, exactly, do they make money?”
But profits provide freedom?—?even when they’re modest. Make decisions that keep your company in the black, right from day one. After all, a bootstrapped business needs to work, because there are no hefty bank deposits to fall back on.
2. You can build the right team, not a “right now” team
Newly-funded companies often face pressure to fill every seat?—?immediately. “Hire fast, fire faster” has even become a startup mantra. There’s a sense that Christmas is coming, so Santa better hire as many elves as possible. It doesn’t matter if they’re out of work by February.
Building the right team is essential. These are the people who will build and nurture the product. They’ll implement new ideas and interact with customers. As Todoist founder Amir Salihefendic says, “Optimize on output. Don’t optimize on the number of people you hire.”
3. Moving slowly can make customers happy
Caring about customers is good for business. That’s not a tagline; it’s an effective way to bootstrap. VC-backed companies often start out with deep knowledge of their audience. Over time, though, it’s easy to confuse what customers want with what investors want.
If you believe that growth reigns supreme, then it will quickly become the primary focus.
“Traction and product development are of equal importance and should each get about half of your attention,” says Gabriel Weinberg, a successful CEO and the author of Traction. “This is what we call the 50 percent rule: spend 50 percent of your time on product and 50 percent on traction.”
4. There’s time and space for learning
Very few people are born knowing exactly how to lead?—?or to design, code, market, sell, and build. Aggressive growth can quickly highlight those knowledge gaps, which are totally okay. Most people launch businesses to create a smart solution, not because they want to run staff meetings.
Growingly slowly enables you to learn alongside your team. You can learn how to manage and motivate those people, too. Mistakes can also be smaller when you’re not feeling the heat from investors, or you suddenly see 50 new faces in the office, all eager for direction. Take your time and you can:
Create effective onboarding processes that set new employees up for success
Get to know people on a human level, not just as “employee #43”
Ensure new team members absorb important values, like openness, honesty, and a willingness to take risks
The power of customer-centric growth
Customers. As we focus on funding options, it’s easy to leave end users out of the conversation. Even the term “users” dehumanizes the people who will buy what we create. But bootstrapped companies ultimately answer to their customers, not to investors. We have an obligation to listen closely to customer needs , feedback , and ideas?—?and that’s a good thing.
Even criticism is great for business, because it pushes the team to stretch and innovate. Customer-funded growth keep us honest; they ensure we don’t stray off track. That’s a powerful advantage.
Test and change. Then test again.
Never assume you know what customers want; you have to look at the data. We’re lucky to live in an era where we can create a hypothesis and then test it without overt bias. Making a product change? Release it to a small group and establish a clear way to measure user reactions. Apply what you learn and test again.
Testing doesn’t mean you’re beholden to customer whims, either. You create the “what,” and customers help to show you “how.” For example, Airbnb’s mission is to create “a world where people can belong through healthy travel that is local, authentic, diverse, inclusive and sustainable.” How, exactly they do that is still up to the smart people running the company.
Get serious about customer support
According to surveys conducted for American Express:
More than half of Americans have scrapped a planned purchase or transaction because of bad service
33% of Americans say they’ll consider switching companies after just a single instance of poor service
U.S. companies lose more than $62 billion annually due to poor customer service
As a group, Millennials are willing to spend the most (an extra 21%) for great customer care
The numbers are clear: customer service matters deeply. Support teams do much more than resolve tickets and answer tedious questions; they have a massive effect on company growth.
Sexy customer acquisition stats usually get the spotlight, but it’s better to spend time, energy, and money on satisfying existing customers than winning over new ones. In fact, data shows that it’s anywhere from 5 to 25 times more expensive to acquire a new customer than to keep a current one.
Hire support staff as methodically as you hire for other roles. Talk to top support team members (even if that’s one person, for now) and create a formula. Identify key traits, must-have skills, and nice-to-have qualities. Use what you learn as a litmus test for hiring.
Put customer support at the center of product innovation. Encourage support teams to speak up and contribute to the innovation pipeline. Empower them to investigate the issues they encounter, instead of operating as script-reading robots.
Enable them to take initiative. Don’t make support team members ask permission to bend the rules, issue a refund, or send a replacement item. And give them the power and resources they need to delight customers.
Develop a reliable knowledge centre. In-depth FAQs allow customers to find simple answers fast, which reduces strain on support teams. Also, create loops that ensure the feedback that arrives through this channel is actionable.
Review processes on a regular basis. Update systems and processes as needed, especially during times of growth. Create rituals for staff to share updates, discuss issues, explore positive feedback, and simply check in.
Say thank you. Reward your support teams on a regular basis. Treat them well. These people are life-savers, and they deserve our gratitude.
Don’t let a startup compromise your sanity
Bootstrapping is not a great way to get PR. And most self-funded entrepreneurs are too busy refining their product to worry about landing on magazine covers.
A little publicity certainly never hurts but what does the attention really do?—?especially if it’s about the business, not the product itself? Most customers don’t read industry or tech publications anyway. Once the attention fades, you’re still left with the same mission and the same challenges.
Highly-publicized funding rounds can also put you under a microscope. For example, Nasty Gal founder Sophia Amoruso made headlines in 2016 when her fashion brand filed for Chapter 11 bankruptcy protection, after raising $65 million over 10 years.
Now that she’s launched a new venture, called Girlboss, both critics and fans are tracking her every move. Many other founders have been in Amoruso’s shoes, too. Well-funded startups that crash and burn often make headlines. With serious money often comes serious scrutiny.
Big-time investments can supercharge the startup (for better or worse), but slow growth can ensure you have a sane, happy personal life?—?even as you build a thriving business. Here’s why.
More downtime = better results
Most people think success requires 16-hour days. Typically, the opposite is true. Busy and effective are not the same thing?—?even though “busyness” has become a modern-day status symbol.
“Hustle might move you forward, but it doesn’t set you up for sustainable success,” says Kyle Young, author of QuitterProof. “Good habits are formed through consistency and repetition, not mindless effort.”
Many of the world’s greatest innovators (past and present) dedicated large amounts of time to simply thinking. Reflecting. Strategizing and planning. Bill Gates originally made the Think Week famous. Now, other founders, like Skillshare’s Mike Karnjanaprakorn, have adopted this practice. Steve Jobs, Mark Zuckerberg and Tim Ferrriss have also followed suit.
Taking a digital sabbath can also keep you feeling rested and ready to play the long game. On Saturday, Sunday or another day of your choice, avoid technology in all forms. For example, power down your laptop and place it safely out of sight. Shut off your smartphone and hide it in a drawer. Change your Netflix password?—?and then try to forget it. Give your brain the gift of peace, and the time to reflect and generate new ideas.
Remember that “overnight success” is a myth
51: That’s how many games Mikael and Niklas Hed created before they launched Angry Birds , which saved their company, Rovio, from bankruptcy.
25: That’s how many publishers rejected Tim Ferriss’ The Four-Hour Workweek before Harmony Books offered him a contract. The 2007 title has now sold over 1.3 million copies to date.
9: That’s how many months Anna Wintour spent at Harper’s Bazaar before she was fired, apparently for producing photo shoots that were “too edgy.” Wintour went on to become one of the most powerful women in fashion, serving as Vogue magazine’s editor-in-chief for over 40 years.
Founders are often hungry for success, but it takes time. Often, lots of time. A sustainable business model gives you the freedom to enjoy the ride. You can focus on building something you love, and that truly serves your customers, instead of racing toward empty growth targets.
How to play (and love) the long game
“So, what’s your exit strategy?”
Entrepreneurs often hear this question before they’ve earned a single dollar?—?and it can be disorienting. When you’re still building a business you love, why would you think about selling it?
Just as there are marked differences between bootstrapped and VC-backed founders, “exit strategies” often divide entrepreneurs into two camps: those building to sell, and those who are in it for the long run.
Either scenario has merit. Business is personal, and we all need to make our own choices. Although some bootstrappers will eventually sell their firms, they rarely begin with this goal in mind.
“What’s better than an exit strategy?” says Todoist founder Amir Salihefendic. “It’s a long-term mission that your company truly cares about. It’s focusing on building a company that can outlast you and creating something of true value.”
Create value first and valuation will follow. Bootstrapping forces you to develop a product that’s worth paying for instead of trying to reach the top of TechCrunch or building a house of cards on a shaky foundation.
A study from the National Bureau of Economic Research found that unicorns (private companies valued above $1 billion) are roughly 50% overvalued. They’re not generating billions of dollars in revenue, but thanks to deep-pocketed investments, paper valuations swell to reach that 10-figure sum.
Relying purely on estimates can be risky, because a sky-high valuation demands rapid scaling. And if the sky suddenly falls, VC-backed startups are often left in a vulnerable position. As Warren Buffet once said, “It’s only when the tide goes out that you can see who’s been swimming naked.”
The media may glorify fast movers and big wins, but playing the long game is another type of victory. In fact, slow growth doesn’t have to be a mere consequence of bootstrapping; it can be a smart, deliberate choice.
If you measure success against lofty goals, it’s easy to feel discouraged along the way and devastated if you don’t reach them at all. Instead, each new milestone can be something to celebrate.
“There is power in small wins and slow gains,” says James Clear. “This is why average speed yields above average results. This is why the system is greater than the goal.”
It’s worth exploring asking yourself:
Where am I trying to go?
What do I gain by getting there quickly?
What am I prepared to sacrifice by making speed part of my strategy?
For many bootstrappers, a harmonious work culture, plus total creative and financial freedom is the ultimate compensation.
Nurturing a healthy culture
In the hard-driving startup world, “culture” can be a cliché topic. Tech companies became infamous for installing foosball tables and offering craft beer on tap in exchange for gruelling work schedules. Superficial perks don’t foster culture?—?or a healthy work-life balance.
At JotForm, we aim to work in a way that’s sane, friendly and open. We keep normal hours and try to treat each other with deep respect. We also believe actions speak louder than words.
Enron Corporation?—?the American energy, commodities and services company?—?had four stated values: respect, integrity, communication and excellence. But those “official” values didn’t save the company from a high-profile bankruptcy and auditing scandal that sent several top executives to prison.
Culture grows through big choices, like team structure, transparency, and product-focused goals. It also emerges through smaller actions, like when the founder preaches balance and leaves the office by 6 pm every night.
As you begin to grow and hire a team, here are five ways to encourage a rich, healthy startup culture:
Give employees the tools they need to thrive. From big monitors to space for sketching and computer work, it rarely makes sense to skimp on the resources that allow people to do their best work.
Study the qualities of standout employees. From personal traits to education and skills, what kind of people move the organization forward? Try to capture both the intangible and concrete qualities you hope to foster, and then use them to inform recruiting, hiring, and promotion.
Set the tone you seek. “If you are lucky enough to be someone’s employer,” says Whole Foods CEO John Mackey, “then you have a moral obligation to make sure people do look forward to coming to work in the morning.” Culture is a major asset that helps organizations to attract top-notch people and encourage them to stay .
Don’t enable incongruent behavior. All JotForm interns, regardless of their position, spend their first week answering customer support questions. We rate their skills and how they treat our customers. Do they listen? Are they patient and encouraging? If someone thinks support work is beneath them, that attitude is incongruent with our company. It doesn’t matter how skilled or talented they might be; they won’t receive a job offer from us.
Remember that culture is constantly changing. Which comes first: great people who establish a healthy culture, or a healthy culture that attracts great people? It doesn’t matter. Startup culture has its own equilibrium, and small changes can have big effects. Keep tabs on how employees are feeling. Watch how they treat each other?—?and your customers. Encourage healthy behavior and choose positive, collaborative people.
A few final words
Bootstrapping is just one way to build a business. Capital-intensive industries such as energy, transportation, telecommunications, and brick-and-mortar stores and restaurants often require funding. VC backing might also be the best way to achieve your business goals and personal ambitions.
For anyone who’s eager to control their entrepreneurial destiny, bootstrapping can be an excellent choice. It worked for me, and I hope it can work for you, too.
Yes, it takes patience, drive, and determination. But the payoffs can include freedom (both financial and personal) and a better sense of work-life balance. You can grow at a sane pace and maintain a healthy personal life.
A self-funded business can also achieve great financial success. It might take more time, but the journey is often far more enjoyable. You can develop a product that improves people’s lives and build a top-notch team to help you along the way. You don’t have to feel like an imposter, either, because there’s time to learn and evolve with your business, not in spite of it.
Slow, sustainable growth is possible.
Stay focused on your product, trust in your abilities, and ask for help when you need it.
According to a Statista report, e-commerce sales are expected to hit $4.8 trillion in the year 2021. In the US, e-commerce accounts for up to 15% of retail sales, and this number is expected to grow steadily!
No wonder that e-commerce offers a lucrative business option to many. However, with escalating profits come the escalating demands of customers who want personalized experiences and round-the-clock connectivity.
To meet these demands, you need a robust e-commerce software at the core of your online store. Such a software makes it easier to manage everything, from your inventory to calculating taxes and shipping costs automatically. Besides, good e-commerce software features an easy-to-use interface, ensuring that even non-technical personnel can manage the platform easily.
What Is the Role of E-commerce software?
The job of e-commerce software is to facilitate the smooth running of your online business. Through various integrations, such software allows you to carry out all the functions required in the day-to-day running of your business from a single place.
Some of the standard functions you can expect from your e-commerce software are automated shipping and tax calculations and end-to-end order management for your business. This includes payment processing, keeping transaction records, managing customer information, generating bills and invoicing, and also offering smart business reports based on analytics. Easy product and inventory management help you keep your store updated. You can also set auto-notifications for low stocks so that you are intimated in time if any product is depleting fast and needs replenishing. The right e-commerce software will also help you simplify marketing through built-in SEO that helps your online store rank higher in SERPs.
The benefits of using an advanced e-commerce software are many.
These include lower costs, elimination of manual errors in billing and inventory, as well as a better customer experience. Especially in present times, when most retailers are competing on customer experience rather than service, price, or quality, a robust e-commerce software could help your customers find what they need, quickly and efficiently. Many hosted solutions also offer website management to ensure a stellar online shopping experience for your customers at all times.
Types of E-Commerce Software
In case you are wondering, there are mainly two types of e-commerce software that you can use for your online store. On-premise e-commerce software is installed on-site and can be customized to suit your business manually. On the other hand, you can subscribe for a SaaS solution, which is relatively cheaper and can be launched online in minimal time.
Besides choosing on-premise or SaaS, there are other questions you must ask yourself before choosing an e-commerce software for your business, such as:
Is the software easy to install?
Is the overall cost of integration within your budget?
Does the software offer integrated services or relies heavily on third-party apps?
Is the platform designed for small businesses or large?
Can I customize the software according to my business needs?
What is the level of automation that I can achieve with this software?
What are the integrated marketing tools available?
What is the type of customer support offered by the platform – are there support forums, FAQs, email, phone, or Live Chat options?
Are there any service limits I must be aware of?
What is the level of security offered by the platform to protect my customers’ data?
Below we discuss some of these crucial points in detail to help you choose the right e-commerce software for your online business:
The Total Cost
All good things come at a price. However, the charges may vary for different platforms, and also for different services on a particular platform.
When you select an e-commerce software, you will pay an initial fee. In addition, you may be required to pay a fixed monthly fee or pay for individual services, such as credit card transactions. However, it is important not to judge the software only on the cost. Many providers charge hefty fees but offer several useful features that can significantly upgrade your e-commerce experience, leading to enhanced profits.
Service Limits
As we previously mentioned, all e-commerce software are not the same. Some may allow you to sell unlimited products, while others may have a limit on the number of products you can sell on the platform, charging you more for any additional products. Besides, an e-commerce software may be designed for a specific kind of product. Thus, it is vital to select a software that supports your product, the size of your inventory and charges a competitive fee.
The Overall Design
Shopify happens to be a popular choice with business owners as it offers a variety of professionally designed themes to customize the appearance of an online store. In addition to the look and feel of the store, your software must allow third-party integration with various apps, payment getaways, and social networks to enhance the customer experience.
Another essential factor to consider is the security of the platform. It is recommended to choose a platform that offers multi-layered security with at least some level of PCI compliance. Monetary transactions must also be secured and mandatorily ask for CVV (and a virtual pin, if possible) on card payments.
Customer Service
According to a study, 44% of consumers prefer the option of talking to an agent in the middle of an online purchase. Thus, offering your customers real-time support across multiple channels could boost your business significantly. Another survey indicates that over 50% of consumers prefer Live Chat software to connect with a business and are comfortable buying from a Chatbot. Additionally, it is predicted that by 2021, brands that redesign their websites to support visual and voice search will increase their revenue by up to 30%.
Clearly then, you need a dynamic platform that is designed to offer real-time support to your customers if you wish to make your online store a success.
Conclusion
A robust e-commerce software can spell the difference between a failed startup and a thriving online business. However, in addition to the features, you must also test the interface to ensure that non-technical members of your team can also manage it.
Is there anything else that you would like to add to this list? Please leave your comments below – we’d love to hear from you.
Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I did to document the ::marker pseudo-element for MDN. This pseudo-element ships in Firefox 68 and is being released today. With the ::marker pseudo element available to us, we can start to do some interesting things with lists, and in this article, I’ll explain more.
Deconstructing A List
You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. While step-by-step instructions or ranked elements may naturally be described by an ordered list
, many things in a design can be described using an unordered list
. A very common usage of the element, for example, is to mark up navigation, as it is a list of destinations on the site. For our exploration, let’s start by finding out exactly what a list is in CSS.
As with many things in CSS, lists have some initial values applied to them. These values make them look like a list. These special values begin with the information that a list item has the display property with a value of list-item. This creates a block-level box, with an additional marker box. The marker box is where the list bullet or number is added.
“An element with display: list-item generates a principal block box for the element’s content and, depending on the values of list-style-type and list-style-image, possibly also a marker box as a visual indication that the element is a list item.”
The principal block box is the main box of the element and contains all of the children as a list item can contain other markup. The marker box is then placed in respect to this principal box. The specification goes on to detail the fact that any background color will be only behind this principal box, and not the marker. Also that the marker can be set to one of a range of pre-defined values:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
inherit
The Level 3 display specification defines display: list-item along with the other possible values for the display property. It refers back to CSS 2.1 — as do many CSS properties and values which come from CSS2 — but describes the list-item keyword as, “causing the element to generate a ::marker pseudo-element”.
The Level 3 specification also introduces the ability to create an inline list item with the two value syntax being used display: inline list-item. This is as yet unimplemented by browsers.
Creating Marker Boxes On Non-List Items
As with other values of display, it is perfectly valid to give any HTML element a display type of list-item (should you wish to generate a ::marker pseudo-element on the item). This will not cause the element to become a list item semantically, but instead it will only visually display as a list item, and therefore be able to have a ::marker. When we discuss the ::marker pseudo-element below, you will discover some cases where giving other elements display: list-item can be useful.
The CSS Lists Level 3 Specification: ::marker And Counters
The display specification expands and clarifies the definition of lists that we find in CSS2, however, there is also a specification which defines list behavior in detail: the CSS Lists Specification Level 3. As the basic behavior of list items is defined in display, this specification details the marker box generated when something has display: list-item along with the counters which are used by default whenever you create an ordered list. There is some potentially useful functionality accessed via these features.
The ::marker Pseudo-Element
The ::marker pseudo-element allows you to target the list marker — separately from the content of the list item. This was not possible in previous versions of CSS, therefore, if you changed the color or font size of the ul or li, this would also change the color and font size of the markers. In order to do something as seemingly simple as having different color list bullets than text, would involve either wrapping the content of the list item in a span (or using an image for the marker).
ul {
color: #00b7a8;
}
ul span {
color #333;
}
With the ::marker pseudo element, the simplest thing you might want to try is having a different bullet to text color, which means that instead of the code in the example above you can use:
ul {
color: #333;
}
ul ::marker {
color: #00b7a8;
}
You might also want to use a different size and font-family for the numbering on an ordered list.
ol ::marker {
font-size: 200%;
color: #00b7a8;
font-family: "Comic Sans MS", cursive, sans-serif;
}
You can see all of these in a supporting browser by using my CodePen example:
See the Pen [Colored bullets with and without marker](https://codepen.io/rachelandrew/penVJQyoR) by Rachel Andrew.
You could use the ::marker pseudo-element on non-list items. In the code below, I have set a heading to display: list-item. This gives it a bullet and therefore a ::marker box to target.
In the above example, I have used generated content in the rules for the marker. Only a small subset of CSS properties is available for use on ::marker. These include font properties and color, however, they also include the content property, for including generated content.
The addition of content as an allowed property for ::marker is recent, however, it is included in the Firefox implementation. The inclusion means that you can do things like include a string of text in a ::marker. It also raises additional possibilities for formatting of markers when you combine the use of counters with ::marker.
Browser Support And Fallbacks
For browsers that do not support the ::marker pseudo-element, the fallback is the regular marker that would have been displayed anyway. Unfortunately, we can’t currently use Feature Queries to detect support for selectors such as this pseudo-element right now, although there has been an issue raised about adding this to the specification. This means that you can’t fork your code to do one thing when you have support and something else if you do not. In most cases, falling back to the regular marker will be a reasonable solution.
Counters
Ordered lists have list numbering — something which is achieved by way of a CSS Counter. The CSS Lists specification therefore also describes these counters. We can access and create counters ourselves which, combined with the ::marker pseudo-element can give us some useful functionality. These counters can also be used in regular (non ::marker) generated content.
If I have a numbered list of steps (and I would like to write out “Step 1”, “Step 2”, and so on), I can do this by using generated content in my marker and appending the list-item counter, this represents the built-in counter:
If you have nested lists, a common way to number them is to have the top-level item a whole number, (1), then child items as (1.1, 1.2) and their children (1.1.1, 1.1.2), and so on. You can achieve this by using more functionality of counters.
When you nest HTML lists, you will end up with multiple counters of the same name — nested inside each other. The nest of counters can be accessed using the counters() function.
In the code below, I am using counters() to format my list markers as described above. The first argument for counters() is the name of the counter to use. I’m using the built-in list-item counter. The second argument is a string — this is what will be concatenated between output counters (I’m using a .). Finally, I add a : outside of the counter function but inside the value of content so that my counter output will be separated from the content by a colon.
This gives me the output as in the image. If you are using a browser which supports ::marker and counters, then you can see it working in the CodePen example — try changing the string from a . to something else to see how that changes the output.
In Firefox, you will see nested list numbering separated by dots.
See the Pen [Nested counters](https://codepen.io/rachelandrew/pen/VJbwxL) by Rachel Andrew.
What’s The Difference Between counter() And counters()?
The counter() function we used in the first example to write out our steps uses the innermost counter only. Therefore, in the situation where you have a set of nested lists, you will write out the counter which related to the level you are currently on.
The counters() function essentially writes out that whole branch and gives you the opportunity to concatenate a string between counters in the branch. So if you have a list item with a counter of 2 (which is part of a list nested inside a list item with a counter of 4), then the branch contains:
4
2
You can output this as 4.2 in the marker by using:
::marker {
content: counters(list-item,'.');
}
Counters On Other Elements
Counters can be used on things which are not lists — either to output a marker — in which case the element will need to have display: list-item — or to output regular generated content. Counters are used extensively in book production, in order to enable chapter and figure numbering amount other things. There is no reason not to take a similar approach on the web, in particular for longer articles.
The CSS properties defined in the CSS Lists specification which deal with these counters are:
counter-set
counter-reset
counter-increment
To see how these work outside of lists we can look at an example of using counters to number the headings in a document.
The first thing I need to do is to create a counter for headers on the body element — ready for use. I’m using the counter-reset property to do this. The counter-reset and counter-set properties are very similar. The counter-reset property will create a new counter if a counter of the specified name does not already exist, but will also create nested counters as described above if a counter of that name does exist. The counter-set property will only create a new counter if there is no counter of that name. For this, use either property would work just fine, however, counter-set does not have as good browser support as counter-reset, so I am taking the practical route:
body {
counter-reset: heading-counter;
}
Now that I have a counter, I can then use the counter-increment property on the selector for the headers; this should increment the counter every time the selector matches.
h2 {
counter-increment: heading-counter;
}
To see the value, I need to output it to the document. I can do this by using Generated Content and adding it before the heading as shown in the following CodePen example:
Alternatively, I could make the h2 element into a list-item and then use ::marker, as demonstrated below. As already detailed, using the ::marker element has limited browser support. In Firefox, you should see the counter used as the marker for the heading, while other browsers will show the default bullet.
There is also a little bit of interactivity that you can achieve using CSS Counters — something that you might think you need JavaScript to do.
I have a form which has a number of required fields. The required status can be selected in CSS with a :required pseudo-class, and the fact that a field has not been completed can be detected by way of the :invalid pseudo class. This means that we can check for fields which are both required and invalid, and increment a counter. Then output that as generated content.
See the Pen [Counting required form fields](https://codepen.io/rachelandrew/pen/vqpJdM) by Rachel Andrew.
How useful this is in reality is debatable — given that we can’t really do anything with that value other than stick it into generated content. There are also concerns with regard to generated content being inaccessible to certain screen readers, therefore any usage that is more than decorative would need to ensure other ways of accessing that information. Read, “Accessibility Support For CSS Generated Content” and the more recent information, “CSS Content Property Screen Reader Compatibility” for more details regarding accessibility and generated content.
However, it demonstrates that counters can achieve more useful things than simply numbering lists. It may be that one day that knowledge does come in handy to solve some problem you are working on.
Find Out More
This article ended up rather a long way from styling lists, despite the fact that everything I have described is found in the CSS Lists specification. You can find more information about the things described in the links below. If you have found an interesting use for CSS Counters, or can think of things you could use ::marker for, add a note in the comments.
