If you know why you want to use Beacon already, feel free to jump directly to the Getting Started section.
What Is The Beacon API For?
The Beacon API is used for sending small amounts of data to a server without waiting for a response. That last part is critical and is the key to why Beacon is so useful — our code never even gets to see a response, even if the server sends one. Beacons are specifically for sending data and then forgetting about it. We don’t expect a response and we don’t get a response.
Think of it like a postcard sent home when on vacation. You put a small amount of data on it (a bit of “Wish you were here” and “The weather’s been lovely”), put it in the mailbox, and you don’t expect a response. No one sends a return postcard saying “Yes, I do wish I was there actually, thank you very much!”
For modern websites and applications, there’s a number of use cases that fall very neatly into this pattern of send-and-forget.
Tracking Stats And Analytics Data
There’s no reason we couldn’t also cover the sort of mundane tasks often handled by Google Analytics, reporting on the user themselves and the capability of their device and browser. If the user has a logged in session, you could even tie those stats back to a known individual. Whatever data you gather, you can send it back to the server with Beacon.
Debugging And Logging
In fact, any logging task can usefully be performed using Beacon, be that creating save-points in a game, collecting information on feature use, or recording results from a multivariate test. If it’s something that happens in the browser that you want the server to know about, then Beacon is likely a contender.
Can’t We Already Do This?
I know what you’re thinking. None of this is new, is it? We’ve been able to communicate from the browser to the server using XMLHTTPRequest for more than a decade. More recently we also have the Fetch API which does much the same thing with a more modern promise-based interface. Given that, why do we need the Beacon API at all?
The key here is that because we don’t get a response, the browser can queue up the request and send it without blocking execution of any other code. As far as the browser is concerned, it doesn’t matter if our code is still running or not, or where the script execution has got to, as there’s nothing to return it can just background the sending of the HTTP request until it’s convenient to send it.
That might mean waiting until CPU load is lower, or until the network is free, or even just sending it right away if it can. The important thing is that the browser queues the beacon and returns control immediately. It does not hold things up while the beacon sends.
To understand why this is a big deal, we need to look at how and when these sorts of requests are issued from our code. Take our example of an analytics logging script. Our code may be timing how long the users spend on a page, so it becomes critical that the data is sent back to the server at the last possible moment. When the user goes to leave a page, we want to stop timing and send the data back home.
Typically, you’d use either the unload or beforeunload event to execute the logging. These are fired when the user does something like following a link on the page to navigate away. The trouble here is that code running on one of the unload events can block execution and delay the unloading of the page. If unloading of the page is delayed, then the loading next page is also delayed, and so the experience feels really sluggish.
Keep in mind how slow HTTP requests can be. If you’re thinking about performance, typically one of the main factors you try to cut down on is extra HTTP requests because going out to the network and getting a response can be super slow. The very last thing you want to do is put that slowness between the activation of a link and the start of the request for the next page.
Beacon gets around this by queuing the request without blocking, returning control immediately back to your script. The browser then takes care of sending that request in the background without blocking. This makes everything much faster, which makes users happier and lets us all keep our jobs.
So we understand what Beacon is, and why we might use it, so let’s get started with some code. The basics couldn’t be simpler:
let result = navigator.sendBeacon(url, data);
The result is boolean, true if the browser accepted and queued the request, and false if there was a problem in doing so.
navigator.sendBeacon takes two parameters. The first is the URL to make the request to. The request is performed as an HTTP POST, sending any data provided in the second parameter.
The data parameter can be in one of several formats, all if which are taken directly from the Fetch API. This can be a Blob, a BufferSource, FormData or URLSearchParams — basically any of the body types used when making a request with Fetch.
I like using FormData for basic key-value data as it’s uncomplicated and easy to read back.
// URL to send the data to
let url = '/api/my-endpoint';
// Create a new FormData and add a key/value pair
let data = new FormData();
let result = navigator.sendBeacon(url, data);
Support in browsers for Beacon is very good, with the only notable exceptions being Internet Explorer (works in Edge) and Opera Mini. For most uses, that should be fine, but it’s worth testing for support before trying to use navigator.sendBeacon.
That’s easy to do:
// Beacon code
// No Beacon. Maybe fall back to XHR?
If Beacon isn’t available and your request is important, you could fall back to a blocking method such as XHR. Depending on your audience and purpose, you might equally choose to not bother.
An Example: Logging Time On A Page
To see this in practice, let’s create a basic system to time how long a user stays on a page. When the page loads we’ll note the time, and when the user leaves the page we’ll send the start time and current time to the server.
As we only care about time spent (not the actual time of day) we can use performance.now() to get a basic timestamp as the page loads:
let startTime = performance.now();
If we wrap up our logging into a function, we can call it when the page unloads.
let logVisit = function()
// Test that we have support
if (!navigator.sendBeacon) return true;
// URL to send the data to, e.g.
let url = '/api/log-visit';
// Data to send
let data = new FormData();
// Let's go!
Finally, we need to call this function when the user leaves the page. My first instinct was to use the unload event, but Safari on a Mac seems to block the request with a security warning, so beforeunload works just fine for us here.
When the page unloads (or, just before it does) our logVisit() function will be called and provided the browser supports the Beacon API our beacon will be sent.
(Note that if there is no Beacon support, we return true and pretend it all worked great. Returning false would cancel the event and stop the page unloading. That would be unfortunate.)
Considerations When Tracking
As so many of the potential uses for Beacon revolve around tracking of activity, I think it would be remiss not to mention the social and legal responsibilities we have as developers when logging and tracking activity that could be tied back to users.
We may think of the recent European GDPR laws as they related to email, but of course, the legislation relates to storing any type of personal data. If you know who your users are and can identify their sessions, then you should check what activity you are logging and how it relates to your stated policies.
Often we don’t need to track as much data as our instincts as developers tell us we should. It can be better to deliberately not store information that would identify a user, and then you reduce your likelihood of getting things wrong.
DNT: Do Not Track
In addition to legal requirements, most browsers have a setting to enable the user to express a desire not to be tracked. Do Not Track sends an HTTP header with the request that looks like this:
If you’re logging data that can track a specific user and the user sends a positive DNT header, then it would be best to follow the user’s wishes and anonymize that data or not track it at all.
In PHP, for example, you can very easily test for this header like so:
// User does not wish to be tracked ...
The Beacon API is a really useful way to send data from a page back to the server, particularly in a logging context. Browser support is very broad, and it enables you to seamlessly log data without negatively impacting the user’s browsing experience and the performance of your site. The non-blocking nature of the requests means that the performance is much faster than alternatives such as XHR and Fetch.
If you’d like to read more about the Beacon API, the following sites are worth a look.
Fewer than 25 percent of businesses express satisfaction with their conversion rates. That’s pretty depressing. Conversion rate optimization (CRO) doesn’t improve your conversion rates overnight, but it sets you up for success. Part of CRO involves optimizing your calls to action for conversions. How is the best call to action for conversions? There’s no single call-to-action formula that can magically convince most of your leads to convert, but if you’re willing to get to know your audience, experience with different CTAs, and test variations, you’ll get closer to the conversion rates you want. We’ll be covering lots of information, so…
Building A Pub/Sub Service In-House Using Node.js And Redis
Today’s world operates in real time. Whether it’s trading stock or ordering food, consumers today expect immediate results. Likewise, we all expect to know things immediately — whether it’s in news or sports. Zero, in other words, is the new hero.
This applies to software developers as well — arguably some of the most impatient people! Before diving into BrowserStack’s story, it would be remiss of me not to provide some background about Pub/Sub. For those of you who are familiar with the basics, feel free to skip the next two paragraphs.
Many applications today rely on real-time data transfer. Let’s look closer at an example: social networks. The likes of Facebook and Twitter generate relevant feeds, and you (via their app) consume it and spy on your friends. They accomplish this with a messaging feature, wherein if a user generates data, it will be posted for others to consume in nothing short of a blink. Any significant delays and users will complain, usage will drop, and if it persists, churn out. The stakes are high, and so are user expectations. So how do services like WhatsApp, Facebook, TD Ameritrade, Wall Street Journal and GrubHub support high volumes of real-time data transfers?
All of them use a similar software architecture at a high level called a “Publish-Subscribe” model, commonly referred to as Pub/Sub.
“In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.“
At BrowserStack, all of our products support (in one way or another) software with a substantial real-time dependency component — whether its automate tests logs, freshly baked browser screenshots, or 15fps mobile streaming.
In such cases, if a single message drops, a customer can lose information vital for preventing a bug. Therefore, we needed to scale for varied data size requirements. For example, with device logger services at a given point of time, there may be 50MB of data generated under a single message. Sizes like this could crash the browser. Not to mention that BrowserStack’s system would need to scale for additional products in the future.
As the size of data for each message differs from a few bytes to up to 100MB, we needed a scalable solution that could support a multitude of scenarios. In other words, we sought a sword that could cut all cakes. In this article, I will discuss the why, how, and results of building our Pub/Sub service in-house.
Through the lens of BrowserStack’s real-world problem, you will get a deeper understanding of the requirements and process of building your very own Pub/Sub.
Our Need For A Pub/Sub Service
BrowserStack has around 100M+ messages, each of which is somewhere between approximately 2 bytes and 100+ MB. These are passed around the world at any moment, all at different Internet speeds.
The largest generators of these messages, by message size, are our BrowserStack Automate products. Both have real-time dashboards displaying all requests and responses for each command of a user test. So, if someone runs a test with 100 requests where the average request-response size is 10 bytes, this transmits 1×100×10 = 1000 bytes.
Now let’s consider the larger picture as — of course — we don’t run just one test a day. More than approximately 850,000 BrowserStack Automate and App Automate tests are run with BrowserStack each and every day. And yes, we average around 235 request-response per test. Since users can take screenshots or ask for page sources in Selenium, our average request-response size is approximately 220 bytes.
So, going back to our calculator:
850,000×235×220 = 43,945,000,000 bytes (approx.) or only 43.945GB per day
Now let’s talk about BrowserStack Live and App Live. Surely we have Automate as our winner in form of size of data. However, Live products take the lead when it comes to the number of messages passed. For every live test, about 20 messages are passed each minute it turns. We run around 100,000 live tests, which each test averaging around 12 mins meaning:
100,000×12×20 = 24,000,000 messages per day
Now for the awesome and remarkable bit: We build, run, and maintain the application for this called pusher with 6 t1.micro instances of ec2. The cost of running the service? About $70 per month.
Choosing To Build vs. Buying
First things first: As a startup, like most others, we were always excited to build things in-house. But we still evaluated a few services out there. The primary requirements we had were:
Reliability and stability,
High performance, and
Let’s leave the cost-effectiveness criteria out, as I can’t think of any external services that cost under $70 a month (tweet me if know you one that does!). So our answer there is obvious.
In terms of reliability and stability, we found companies that provided Pub/Sub as a service with 99.9+ percent uptime SLA, but there were many T&C’s attached. The problem is not as simple as you think, especially when you consider the vast lands of the open Internet that lie between the system and client. Anyone familiar with Internet infrastructure knows stable connectivity is the biggest challenge. Additionally, the amount of data sent depends on traffic. For example, a data pipe that’s at zero for one minute may burst during the next. Services providing adequate reliability during such burst moments are rare (Google and Amazon).
Performance for our project means obtaining and sending data to all listening nodes at near zero latency. At BrowserStack, we utilize cloud services (AWS) along with co-location hosting. However, our publishers and/or subscribers could be placed anywhere. For example, it may involve an AWS application server generating much-needed log data, or terminals (machines where users can securely connect for testing). Coming back to the open Internet issue again, if we were to reduce our risk we would have to ensure our Pub/Sub leveraged the best host services and AWS.
Another essential requirement was the ability to transmit all types of data (Bytes, text, weird media data, etc.). With all considered, it did not make sense to rely on a third-party solution to support our products. In turn, we decided to revive our startup spirit, rolling up our sleeves to code our own solution.
Building Our Solution
Pub/Sub by design means there will be a publisher, generating and sending data, and a Subscriber accepting and processing it. This is similar to a radio: A radio channel broadcasts (publishes) content everywhere within a range. As a subscriber, you can decide whether to tune into that channel and listen (or turn off your radio altogether).
Unlike the radio analogy where data is free for all and anyone can decide to tune in, in our digital scenario we need authentication which means data generated by the publisher could only be for a single particular client or subscriber.
Above is a diagram providing an example of a good Pub/Sub with:
Here we have two publishers generating messages based on pre-defined logic. In our radio analogy, these are our radio jockeys creating the content.
There are two here, meaning there are two types of data. We can say these are our radio channels 1 and 2.
We have three that each read data on a particular topic. One thing to notice is that Subscriber 2 is reading from multiple topics. In our radio analogy, these are the people who are tuned into a radio channel.
Let’s start understanding the necessary requirements for the service.
An evented component
This kicks in only when there is something to kick in.
This keeps data persisted for a short duration so if the subscriber is slow, it still has a window to consume it.
Reducing the latency
Connecting two entities over a network with minimum hops and distance.
We picked a technology stack that fulfilled the above requirements:
Because why not? Evented, we wouldn’t need heavy data processing, plus it’s easy to onboard.
Supports perfectly short-lived data. It has all the capabilities to initiate, update and auto-expire. It also puts less load on the application.
Node.js For Business Logic Connectivity
Node.js is a nearly perfect language when it comes to writing code incorporating IO and events. Our particular given problem had both, making this option the most practical for our needs.
Surely other languages such as Java could be more optimized, or a language like Python offers scalability. However, the cost of starting with these languages is so high that a developer could finish writing code in Node in the same duration.
To be honest, if the service had a chance of adding more complicated features, we could have looked at other languages or a completed stack. But here it is a marriage made in heaven. Here is our package.json:
Very simply put, we believe in minimalism especially when it comes to writing code. On the other hand, we could have used libraries like Express to write extensible code for this project. However, our startup instincts decided to pass on this and to save it for the next project. Additional tools we used:
This is one of the most supported libraries for Redis connectivity with Node.js used by companies including Alibaba.
The best library for graceful connectivity and fallback with WebSocket and HTTP.
Redis For Transient Storage
Redis as a service scales is heavily reliable and configurable. Plus there are many reliable managed service providers for Redis, including AWS. Even if you don’t want to use a provider, Redis is easy to get started with.
Let’s break down the configurable part. We started off with the usual master-slave configuration, but Redis also comes with cluster or sentinel modes. Every mode has its own advantages.
If we could share the data in some way, a Redis cluster would be the best choice. But if we shared the data by any heuristics, we have less flexibility as the heuristic has to be followed across. Fewer rules, more control is good for life!
Redis Sentinel works best for us as data lookup is done in just one node, connecting at a given point in time while data is not sharded. This also means that even if multiple nodes are lost, the data is still distributed and present in other nodes. So you have more HA and less chances of loss. Of course, this removed the pros from having a cluster, but our use case is different.
Architecture At 30000 Feet
The diagram below provides a very high-level picture of how our Automate and App Automate dashboards work. Remember the real-time system that we had from the earlier section?
In our diagram, our main workflow is highlighted with thicker borders. The “automate” section consists of:
Comprised of the pristine versions of Windows, OSX, Android or iOS that you get while testing on BrowserStack.
The point of contact for all your Selenium and Appium tests with BrowserStack.
The “user service” section here is our gatekeeper, ensuring data is sent to and saved for the right individual. It is also our security keeper. The “pusher” section incorporates the heart of what we discussed in this article. It consists of the usual suspects including:
Our transient storage for messages, where in our case automate logs are temporarily stored.
This is basically the entity that obtains data from the hub. All your request responses are captured by this component which writes to Redis with session_id as the channel.
This reads data from Redis generated for the session_id. It is also the web server for clients to connect via WebSocket (or HTTP) to get data and then sends it to authenticated clients.
Finally, we have the user’s browser section, representing an authenticated WebSocket connection to ensure session_id logs are sent. This enables the front-end JS to parse and beautify it for users.
Similar to the logs service, we have pusher here that is being used for other product integrations. Instead of session_id, we use another form of ID to represent that channel. This all works out of pusher!
We’ve had considerable success in building out Pub/Sub. To sum up why we built it in-house:
Scales better for our needs;
Cheaper than outsourced services;
Full control over the overall architecture.
Events and Redis as a system keep things simple for developers, as you can obtain data from one source and push it to another via Redis. So we built it.
If the usage fits into your system, I recommend doing the same!
For a long time, responsive design dominated the web as the format of choice for business and personal sites. Now, however, mobile optimization has begun to gain credence as a potentially preferable strategy. Mobile optimization refers to optimizing a website specifically for mobile devices. Instead of simply compressing and slightly rearranging the content on the screen, you design the entire experience for smaller screens. You’ve probably heard the term “mobile-friendly.” It’s a bit outdated, so even though it sounds like a good thing, it’s not enough. People are using their mobile devices more and more, as I’ll explain in a…
Conversion rate optimization offers one of the fastest, most effective methodologies for turning your existing web traffic into paying customers. Also known as CRO, conversion rate optimization can involve numerous tools and strategies, but they’re all geared toward the same thing: Converting visitors into leads and leads into customers. There is a lot of conflicting and illuminating information out there about CRO. For instance, one study found that using long-form landing pages increased conversions by 220 percent. However, some companies find that short-form landing pages work better for their audiences. Similarly, about 75 percent of businesses who responded to another…
Monthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web Authentication
As developers, we often talk about performance and request browsers to render things faster. But when they finally do, we demand even more performance.
Alex Russel from the Chrome team now shared some thoughts on developers abusing browser performance and explains why websites are still slow even though browsers reinvented themselves with incredibly fast rendering engines. This is in line with an article by Oliver Williams in which he states that we’re focusing on the wrong things, and instead of delivering the fastest solutions for slower machines and browsers, we’re serving even bigger bundles with polyfills and transpiled code to every browser.
It certainly isn’t easy to break out of this pattern and keep bundle size to a minimum in the interest of the user, but we have the technologies to achieve that. So let’s explore non-traditional ways and think about the actual user experience more often — before defining a project workflow instead of afterward.
Front-End Performance Checklist 2018
To help you cater for fast and smooth experiences, Vitaly Friedman summarized everything you need to know to optimize your site’s performance in one handy checklist. Read more →
Firefox 60 is out and brings ECMAScript Modules, as well as the Web Authentication API.
With Chrome 66 already released and the newest Firefox version coming up next, two major browsers are now distrusting all Symantec certificates that were issued before June 2016 — and trust me when I’m saying there are a lot of sites that still haven’t changed their affected certificates and, thus, will be out of reach for users now (Chrome) or very soon (Firefox).
The Windows 10 April update brought EdgeHTML 17 with mute tabs, autofill forms, a new “print website” mode to save resources, Service Workers and Push Notifications. Variable Fonts, Screen Capture in RTC via the Media Capture API, Subresource Integrity (SRI), and support for the Upgrade-Insecure-Requests header have also been added. Quite a step forward!
npm version 6 is here with some important security improvements. From now on, you not only have a new npm audit command to audit your depenencies for vulnerabilities, but npm will do this automatically and report back during dependency installs. The new version also comes with npm ci to make CI tasks faster and a couple of other improvements.
Node 10 is out with generators and async function support, full support for N-API and support for the Inspector protocol. It will become the next long-term support version in October.
Big news comes from Adobe regarding their Xd prototyping product: From now on, the software will be free for anyone with the new Starter Plan. The only differences to paid plans are limited storage, only one shared prototype (but as many non-shared as you want), and only the free Typekit library. The Xd team also improved the Sketch and Photoshop integrations, and you can now swap symbols, paste to multiple artboards, and protect design specs with a password, too.
The latest Firefox version comes with Web Authentication API support — a big step towards eliminating passwords. The API lets you log in via a hardware key like YubiKey if the browser and the web service both support the new technology. Notably, Chrome 67 beta is shipping the API as well already. Their team has written a technical implementation guide.
Starting from Firefox 60, we will be able to specify the same-site attribute for Cookies. This will allow a web application to advise the browser that cookies should only be sent if the request originates from the website the cookie came from. Read more details in the announcement blog post.
The GDPR Checklist is another helpful resource for people to check whether a website is compliant with the upcoming EU directive.
Postgres 10 has been here for quite a while already, but I personally struggled to find good information on how to use all these amazing features it brings along. Gabriel Enslein now shares Postgres 10 performance updates in a slide deck, shedding light on how to use the built-in JSON support, native partitioning for large datasets, hash index resiliency, and more.
Sam Thorogood shares how we can build a “native undo & redo for the web”, as used in many text editors, games, planning or graphical software and other occasions such as a drag and drop reordering. And while it’s not easy to build, the article explains the concepts and technical aspects to help us understand this complicated matter.
There’s a new way to implement element/container queries into your application: eqio is a tiny library using IntersectionObserver.
Work & Life
Johannes Seitz shares his thoughts about project management at the start of projects. He calls the method “Iteration Zero”. An interesting concept to understand the scope and risks of a project better at a time when you still don’t have enough experience with the project itself but need to build a roadmap to get things started.
Arestia Rosenberg shares why her number one advice for freelancers is to ‘lean into the moment’. It’s about doing work when you can and using your chance to do something else when you don’t feel you can work productively. In the end, the summary results in a happy life and more productivity. I’d personally extend this to all people who can do that, but, of course, it’s best applicable to freelancers indeed.
Ethan Marcotte elaborates on the ethical issues with Google Duplex that is designed to imitate human voice so well that people don’t notice if it’s a machine or a human being. While this sounds quite interesting from a technical point of view, it will push the debate about fake news much further and cause more struggle to differentiate between something a human said or a machine imitated.
I bet that most of you haven’t heard of Palantir yet. The company is funded by Peter Thiel and is a data-mining company that has the intention to collect as much data as possible about everybody in the world. It’s known to collaborate with various law enforcement authorities and even has connections to military services. What they do with data and which data they have from us isn’t known. My only hope right now is that this company will suffer a lot from the EU GDPR directive and that the European Union will try to stop their uncontrolled data collection. Facebook’s data practices are nothing compared to Palantir it seems.
Anton Sten shares his thoughts on Vanity Metrics, a common way to share numbers and statistics out of context. And since he realized what relevancy they have, he thinks differently about most of the commonly readable data such as investments or usage data of services now. Reading one number without having a context to compare it to doesn’t matter at all. We should keep that in mind.
We hope you enjoyed this Web Development Update. The next one is scheduled for Friday, June 15th. Stay tuned.
Managing SVG Interaction With The Pointer Events Property
Try clicking or tapping the SVG image below. If you put your pointer in the right place (the shaded path) then you should have Smashing Magazine’s homepage open in a new browser tab. If you tried to click on some white space, you might be really confused instead.
This is the dilemma I faced during a recent project that included links within SVG images. Sometimes when I clicked the image, the link worked. Other times it didn’t. Confusing, right?
I turned to the SVG specification to learn more about what might be happening and whether SVG offers a fix. The answer: pointer-events.
Not to be confused with DOM (Document Object Model) pointer events, pointer-events is both a CSS property and an SVG element attribute. With it, we can manage which parts of an SVG document or element can receive events from a pointing device such as a mouse, trackpad, or finger.
A note about terminology: “pointer events” is also the name of a device-agnostic, web platform feature for user input. However, in this article — and for the purposes of the pointer-events property — the phrase “pointer events” also includes mouse and touch events.
Outside Of The Box: SVG’s “Shape Model”
Using CSS with HTML imposes a box layout model on HTML. In the box layout model, every element generates a rectangle around its contents. That rectangle may be inline, inline-level, atomic inline-level, or block, but it’s still a rectangle with four right angles and four edges. When we add a link or an event listener to an element, the interactive area matches the dimensions of the rectangle.
Note: Adding a clip-path to an interactive element alters its interactive bounds. In other words, if you add a hexagonal clip-path path to an a element, only the points within the clipping path will be clickable. Similarly, adding a skew transformation will turn rectangles into rhomboids.
SVG does not have a box layout model. You see, when an SVG document is contained by an HTML document, within a CSS layout, the root SVG element adheres to the box layout model. Its child elements do not. As a result, most CSS layout-related properties don’t apply to SVG.
So instead, SVG has what I’ll call a ‘shape model’. When we add a link or an event listener to an SVG document or element, the interactive area will not necessarily be a rectangle. SVG elements do have a bounding box. The bounding box is defined as: the tightest fitting rectangle aligned with the axes of that element’s user coordinate system that entirely encloses it and its descendants. But initially, which parts of an SVG document are interactive depends on which parts are visible and/or painted.
Painted vs. Visible Elements
SVG elements can be “filled” but they can also be “stroked”. Fill refers to the interior of a shape. Stroke refers to its outline.
Together, “fill” and “stroke” are painting operations that render elements to the screen or page (also known as the canvas). When we talk about painted elements, we mean that the element has a fill and/or a stroke. Usually, this means the element is also visible.
However, an SVG element can be painted without being visible. This can happen if the visible attribute value or CSS property is hidden or when display is none. The element is there and occupies theoretical space. We just can’t see it (and assistive technology may not detect it).
Perhaps more confusingly, an element can also be visible — that is, have a computed visibility value of visible — without being painted. This happens when elements lack both a stroke and a fill.
Note: Color values with alpha transparency (e.g. rgba(0,0,0,0)) do not affect whether an element is painted or visible. In other words, if an element has an alpha transparent fill or stroke, it’s painted even if it can’t be seen.
Knowing when an element is painted, visible, or neither is crucial to understanding the impact of each pointer-events value.
All Or None Or Something In Between: The Values
pointer-events is both a CSS property and an SVG element attribute. Its initial value is auto, which means that only the painted and visible portions will receive pointer events. Most other values can be split into two groups:
Values that require an element to be visible; and
Values that do not.
painted, fill, stroke, and all fall into the latter category. Their visibility-dependent counterparts — visiblePainted, visibleFill, visibleStroke and visible — fall into the former.
The SVG 2.0 specification also defines a bounding-box value. When the value of pointer-events is bounding-box, the rectangular area around the element can also receive pointer events. As of this writing, only Chrome 65+ supports the bounding-box value.
none is also a valid value. It prevents the element and its children from receiving any pointer events. The pointer-events CSS property can be used with HTML elements too. But when used with HTML, only auto and none are valid values.
Since pointer-events values are better demonstrated than explained, let’s look at some demos.
Here we have a circle with a fill and a stroke applied. It’s both painted and visible. The entire circle can receive pointer events, but the area outside of the circle cannot.
Disable the fill, so that its value is none. Now if you try to hover, click, or tap the interior of the circle, nothing happens. But if you do the same for the stroke area, pointer events are still dispatched. Changing the fill value to none means that this area visible, but not painted.
Let’s make a small change to our markup. We’ll add pointer-events="visible" to our circle element, while keeping fill=none.
Now the unpainted area encircled by the stroke can receive pointer events.
Augmenting The Clickable Area Of An SVG Image
Let’s return to the image from the beginning of this article. Our “amethyst” is a path element, as opposed to a group of polygons each with a stroke and fill. That means we can’t just add pointer-events="all" and call it a day.
Instead, we need to augment the click area. Let’s use what we know about painted and visible elements. In the example below, I’ve added a rectangle to our image markup.
Even though this rectangle is unseen, it’s still technically visible (i.e. visibility: visible). Its lack of a fill, however, means that it is not painted. Our image looks the same. Indeed it still works the same — clicking white space still doesn’t trigger a navigation operation. We still need to add a pointer-events attribute to our a element. Using the visible or all values will work here.
Using bounding-box would eliminate the need for a phantom element. All points within the bounding box would receive pointer events, including the white space enclosed by the path. But again: pointer-events="bounding-box" isn’t widely supported. Until it is, we can use unpainted elements.
Using pointer-events When Mixing SVG And HTML
Another case where pointer-events may be helpful: using SVG inside of an HTML button.
In most browsers — Firefox and Internet Explorer 11 are exceptions here — the value of event.target will be an SVG element instead of our HTML button. Let’s add pointer-events="none" to our opening SVG tag.
Now when users click or tap our button, the event.target will refer to our button.
SVG supports the same kind of interactivity we’re used to with HTML. We can use it to create charts that respond to clicks or taps. We can create linked areas that don’t adhere to the CSS and HTML box model. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction.
Browser support for SVG pointer-events is robust. Every browser that supports SVG supports the property for SVG documents and elements. When used with HTML elements, support is slightly less robust. It isn’t available in Internet Explorer 10 or its predecessors, or any version of Opera Mini.
We’ve just scratched the surface of pointer-events in this piece. For a more in-depth, technical treatment, read through the SVG Specification. MDN (Mozilla Developer Network) Web Docs offers more web developer-friendly documentation for pointer-events, complete with examples.
WordPress Local Development For Beginners: From Setup To Deployment
When first starting out with WordPress, it’s very common to make any changes directly on your live site. After all, where else would you do it? You only have that one site, so when something needs changing, you do it there.
However, this practice has several drawbacks. Most of all that it’s very public. So, when something goes seriously wrong, it’s quite noticeable for people on your site.
Preventing Common Mistakes
When creating free or premium WordPress themes, you’re bound to make mistakes. Find out how you can avoid them in order to save yourself time and focus on actually creating themes people will enjoy using. Read more →
It’s ok, don’t feel bad. Most WordPress beginners have done this at one point or another. However, in this article, we want to show you a better way: local WordPress development.
What that means is setting up a copy of your website on your local hard drive. Doing so is incredibly useful. So, below we will talk about the benefits of building a local WordPress development environment, how to set one up and how to move your local site to the web when it’s ready.
This is important, so stay tuned!
The Benefits Of Local WordPress Development
Before diving into the how, let’s have a look at the why. Using a local development version of WordPress offers many benefits.
We already mentioned that you no longer have to make changes to your live site with all the risks involved with that. However, there is more:
Test themes and plugins With a local copy of your site, you can try out as many themes and plugin combinations as you want without risking taking your live site out due to incompatibilities.
Update safely Another time when things are prone to go wrong are updates. With a local environment, you can update WordPress core and components to see if there are any problems before applying the updates to your live site.
Independent of an online connection With your WordPress site on your computer, you can work on it without being connected to the Internet. Thus, you can get work done even if there is no wifi.
High performance/low cost Because site performance is not limited by an online connection, local sites usually run much faster. This makes for a better workflow. Also, as you will see, you can set it all up with free software, eliminating the need for a paid staging area.
Sounds good? Then let’s see how to make it happen.
How To Set Up A Local Development Environment For WordPress
In this next part, we will show you how to set up your own local WordPress environment. First, we will go over what you need to do and then how to get it right.
Tools You’ll Need
In order to run, WordPress needs a server. That’s true for an online site as well as a local installation. So, we need to find a way to set one up on our computer.
That server also needs some software WordPress requires to work. Namely, that’s PHP (the platform’s main programming language) and MySQL for the database. Plus, it’s nice to have a MySQL user interface like phpMyAdmin to make handling the database more convenient.
Finally, it’s useful to have some developer tools to analyze and debug your site, for example, to look at HTML and CSS. The easiest way is to use Chrome or Firefox (read our article on Firefox’s DevTools), which have extensive functionality like that built in.
We have several options at our disposal to set up local server environments. Some of the most well known are DesktopServer, Vagrant, and Local by Flywheel. All of these contain the necessary components to set up a local server that WordPress can run on.
For this tutorial we will use XAMPP. The name is an acronym and stands for “cross platform, Apache, MySQL, PHP, Perl”. If you have been paying attention, you will notice that we earlier noted MySQL and PHP as essential to running a WordPress website. In addition, Apache is an open source solution for creating servers. So, the software contains everything we need in one neat package. Plus, as “cross platform” suggests, XAMPP is available for both Windows, Mac and Linux computers.
Installing XAMPP pretty much works like every other piece of software.
Run the installer (note that you might get a warning about running unknown software, allow to continue).
When asked which components to install, make sure that Apache, MySQL, PHP, and phpMyAdmin are active. The rest is usually unnecessary, deactivate it unless you have good reason not to.
Choose the location to install. Make sure it’s easy to reach as that’s where your sites will be saved and you will probably access them often.
You can disregard the information about Bitnami.
Choose to start the control panel right away at the end.
Open the .dmg file
Double click on the XAMPP icon or drag it to applications folder
That’s it, well done!
After the installation is complete, the control panel starts. Should your operating system ask for Firewall permissions, make sure to allow XAMPP for private networks, otherwise, it won’t work.
From the panel, you can start Apache and MySQL by clicking the Start buttons on the respective rows. If you run into problems with programs that use the same ports as XAMPP, quit those programs and try to restart the XAMPP processes. If the problem is with Skype, there is a permanent solution by disabling the ports under Tools → Options → Advanced → Connections.
Under Config, you can also enable automatic start for the components you need.
After that, it’s time to test your local server. For that, open your browser, and go to http://localhost.
If you see the following screen, everything works as it should. Well done!
Installing WordPress Locally
Now that you have a local server, you can install WordPress in the same way that you do on a web server. The only difference: everything is done on your hard drive, not an FTP server or inside a hosting provider’s admin panel.
Once that is done and you want to install WordPress, you can do so via the htdocs folder inside your installation of XAMPP. There, simply create a new directory, download the latest version of WordPress, unpack the files and copy them into the new folder. After that, you can start the installation by going to http://localhost/newdirectoryname.
When you are satisfied, you can then move the website from a local installation to live environment. That’s what we will talk about next.
How To Deploy Your Site With A Plugin
Alright, once your local site is up to your liking, it’s time to get it online. Just a quick note: if you want to get a copy of your existing live site to your hard drive, you can use the same process as described below only in reverse. The overall principles stay the same.
Either way, we can do this manually or via plugin and there are several solutions available. For this tutorial, we will use Duplicator. I found it to be one of the most convenient free solutions and, as you will see, it makes things really easy.
1. Install Duplicator
Like every other WordPress plugin, you first need to install Duplicator in order to use it. For that, simply go to Plugins → Add New. In the search box, input the plugin name and hit enter, it should be the first search result.
Click Install Now and activate once it’s done.
2. Export Site
When Duplicator is active on your site, it adds a new menu item in the WordPress dashboard. Clicking it gets you to this screen.
Here, you can create a so-called package. In Duplicator that means a zipped up version of your site, database, and an installation file. To get started, simply click on Create New.
In the next step, you can enter a name for your package. However, it’s not really necessary unless you have a specific reason.
Under Storage, Archive, and Installer are options to determine where to save the archive (works for the Pro version only), exclude files or database tables from the migration and input the updated database credentials and new URL.
In most cases you can just leave everything as is, especially because Duplicator will attempt to fill in the new credentials automatically later. So, for now just hit Next.
After that, Duplicator will run a test to see if there are any problems.
Unless something major pops up, just click on Build to begin building the package. This will start the backup process.
At the end of it, you get the option to download the zip file and installer with the click on the respective buttons or with the help of the One-Click Download.
Do so and you are done with this part of the process.
3. Upload And Deploy Files On Your Server
If all of this has gone down without a hitch, it’s now time to upload the generated files to their new home. For that, log into your FTP server and browse to your new site’s home directory. Then, start uploading the files we generated in the last step.
Once done, you can start the installation process by inputting http://yoursite.com/installer.php into the browser bar.
In the first step, the plugin checks the archive’s integrity and whether it can deploy the site in the current environment. You also get some advanced options that you are welcome to ignore at the moment. However, make sure to check the box where it says “I have read and accept all terms and notices,” before clicking Next.
Your site is now being unpacked. After that, you get to the screen where it’s time to input the database information.
The plugin can either create a new database (if your host allows it) or use an existing one. For the latter option, you need to set up the database manually beforehand. Either way, you need to input the database name, username, and password to continue. Duplicator will also use this information to update the wp-config.php file of your site so that it can talk to the new database. Click Test Database to see if the connection works. Hit Next to start the installation of the database.
Once Duplicator is done with that, the final step is to confirm the details of your old and new site.
That way, Duplicator is able to replace all mentions of your old URL in the database with the new one. If you don’t, your site won’t work properly. If everything is fine, click the button that says Next.
4. Finishing Up
Now, there are just a few more things to do before you are finished. The first one is to check the last page of the setup for any problems encountered in the deployment.
The second is to log into your new site (you can do so via the button). Doing so will land you in the Duplicator menu.
Here, be sure to click on Remove Installation Files Now! at the top. This is important for security reasons.
And that’s it, your site should now be successfully migrated. Well done! You have just mastered the basics of local WordPress development.
Quick Note: Updating Your Database Information Manually
Should the Duplicator plugin for some reason be unable to update wp-config.php with the new database information, your site won’t work and you will see a warning that says “unable to establish database connection”.
In that case, you need to change the information manually. Do this by finding wp-config.php in your WordPress installation’s main folder. You can access it via FTP or a hosting backend like cPanel. Ask your provider for help if you find yourself unable to locate it on your own.
Edit the file (this might mean downloading, editing and re-uploading it) and find the following lines:
/** The name of the database for WordPress */
/** MySQL database username */
/** MySQL database password */
/** MySQL hostname */
Update the information here with that of your new host (by replacing the info between the ‘ ‘), save the file and move it back to your site’s main directory. Now everything should be fine.
WordPress Local Development In A Nutshell
Learning how to install WordPress locally is super useful. It enables you to make site changes, run updates, test themes and plugins and more in a risk-free environment. In addition to that, it’s free thanks to open source software.
Above, you have learned how to build a local WordPress environment with XAMPP. We have led you through the installation process and explained how to use the local server with WordPress. We have also covered how to get your local site online once it’s ready to see the light of day.
Hopefully, your takeaway is that all of this is pretty easy. It might feel overwhelming as a beginner at first, however, using WordPress locally will become second nature quickly. Plus, the benefits clearly outweigh the learning process and will help you take your WordPress skills to the next level.
What are your thoughts on local WordPress development? Any comments, software or tips to share? Please do so in the comments section below!
Have you ever wondered what it would be like to travel the world while working as a designer? It might sound like a dream, but all that glitters is not gold, and it might not be the right choice for you. In this article, I’ll share some insights from my four years of travel and work that hopefully will be useful for anyone willing to try a nomadic lifestyle, too.
When I wrote the first draft of this article, I was in London, after a long trip to Asia. Now, I’m making changes to it in Mexico, before going to Argentina to visit my family. Changing countries often has become an important part of my life as a designer; and, curiously, it all happened by accident.
I once heard that, while at the office, you should stand up from your desk, stretch your legs, leave the building and never come back. That’s exactly what I did when I was living in Barcelona in March 2014. At the time, I was working for a big company on a project that I didn’t enjoy, and was participating in meetings with people I didn’t know. Sounds like fun, doesn’t it?
Looking back, I see that quitting a stable job to jump into the void of a traveling life was one of the scariest moments of my life. I was going to start a trip to South America, doing design workshops and lectures that would provide me with income to sustain my journey — but in reality, I had no idea what I was doing. Without knowing it, I was becoming a nomadic designer.
When that six-month trip ended and I went back to Barcelona, I was never able to settle again. So, what did I do? Of course, I kept traveling! Four years and 60 countries later, I’m still on it.
And I am not alone. I’d like to quote Vitaly Friedman (founder and long-time editor in chief of Smashing Magazine), who once said:
“There is nothing more liberating and sentimental than the sound of a closing door that you will never open again. As memories are flowing by, you turn your back from that door, you hold your breath for just a second and you walk away. At that point you almost sense the change in the wind flowing by. You let go; and knowing and feeling this change is an incredibly empowering, intoxicating experience.”
If this sounds appealing, and you would like to try it for yourself, I hope my article will help you get started. Please note, however, that I’m not going to give you a “how to” guide, with step-by-step instructions that will work for everyone. Instead, I’ll share some insights from my personal experience.
Whatever People Think It Is, It Is Not That
When I tell someone that I’m constantly traveling, usually the person looks amazed. Most of the time, their first question is, “How can you afford to live like that?” I sometimes joke, saying I’m a millionaire with plenty of free time, but it’s not only because of this that I suspect they get the wrong idea about “working and traveling.” Perhaps, some of them imagine plenty of beaches and a lot of comfort and freedom.
Well, guess what? Working from a beach is not that fun or convenient. Or, as Preston Lee puts it, “Freelancing is not sitting on the beach, sipping margaritas, and reading books by Tim Ferriss.”
But the part about having a lot of freedom is true. I do have a lot of freedom and flexibility — like any other freelancer — with the bonus that I get to know different places, people, cultures and cuisines. The perks of such a lifestyle outweigh the difficulties, but at the same time, not everyone would be willing to handle it.
Today, the “digital nomad” hype is all around, with a lot of people publishing e-books, videos and blog posts selling an ideal lifestyle that’s apparently perfect. Of course, some things are often left out — things like getting tired of packing again and again, being away from family and friends, and starting over often. That’s why people might have a unrealistic idea of what all this is about.
In case you are considering trying something similar, it might help to be aware of some personal characteristics that would be helpful to have.
Comfort With Being Alone
Being a solo traveler allows me to make my own decisions and be wherever I want, whenever I want. I spend a lot of time by myself (luckily, I get along well with myself). Even though it’s fine for me, I know it’s not for everybody. Loneliness is easy to solve, though. Coworking spaces, hostels, couchsurfing hangouts and Meetup are great places when you feel like you need some company and want to meet new friends.
Being Able To Adapt To New Contexts Easily
On a rough average, I move from one place to another every four days. This is very tiring, because every time I switch cities, I have to repeat the same process: book transportation and accommodation, pack my stuff, figure out how to get around, check the weather and find out about the cost of living. Ideally, you won’t be moving that often, but you should be able to grab your things quickly and move to a new place that better meets your expectations.
In some cases, you could plan to stay three or four months in the same spot, but the reality is that you will never know how you’ll feel until you get there. So, my advice is: Go little by little, especially at the beginning.
Flexible But Organized
I think I’ve never been as organized as I’ve been since I started traveling. Apart from the tools that I normally use to generate invoices, track payments and manage projects as a freelance designer, I also have several spreadsheets to organize my flights, accommodation and daily expenses.
The spreadsheet for expenses is divided into different categories and organized by day. I put in there all the money that goes out, so that I know exactly what’s happening, and how close I am to reaching my daily budget. I know there are some apps for this, but so far I haven’t felt comfortable with any of them. The key here is not to cheat (just write down everything) and to be consistent (do it every day) — this will give you good insight into how you are spending your money on the road. Then, it will be easier for you to make decisions based on the data gathered — for example, you could stop buying expensive cocktails so much.
Before Packing: Find A Remote-Friendly Job
If you’ve decided to give it a try, then, as a minimum, plan your start, and don’t leave home without at least one or two months of contracted work. This will keep you busy for the first part of your trip, so you’ll only have to worry about settling in a new place.
When I went to South America at the very beginning of my new life, I contacted several design organizations, schools and agencies that could help me organize design workshops and lectures in different countries. I did this because, a few months before leaving, I, along with a friend (¡hola José!) self-published a book that gained some popularity among designers in Latin America, and I was willing to teach its contents and show how to put them into practice. Doing things like that provided me with at least some idea of dates and an approximate income, while leaving other things to improvisation.
In my case, I’ve always liked being a freelancer, so I give myself a bit more flexibility in managing my schedule. One of the last projects I worked on was for a team in Barcelona and in which the words “remote” and “freelance” were clear in our agreement from the very beginning. This is what allowed me to keep going from country to country, splitting my time between work and getting to know new places and people.
Just so you know how “glamorous” this way of working is, at the beginning of this project I tried to hide my background during video calls or said that I couldn’t turn video on, because I was a bit embarrassed. By the end, though, my teammates didn’t care about that, and so later on, usually the first question of a video call was to ask me for a tour of the place I was staying at, to everyone’s amusement.
Of course, freelancing is not the only way. Working at a remote-friendly company could also be a good option for you. While you’ll lose some of the freedom to move around, if you plan to stay longer in places, then this could be the way to go: Hubspot, Basecamp, Bohemian Coding (of Sketch fame) and Automattic are some examples of companies that successfully work with designers and developers remotely, and there are many more.
Regardless of whether you are freelancing or working for someone else, I have to say that face to face contact with members of your team is necessary from time to time to time, especially when planning meetings at the beginning of a project, when things are not all that clear. This will partly determine the location you choose, so best to pick a place that allows you to conveniently go where your team is based when needed.
Choosing Your Next Destination
After finding work that allows you to be on the move, the next big thing is to decide where to base yourself. The good thing is that you can work from any place with a decent Internet connection and easy access to coffee (which is essential).
So far, I’ve been in 60 countries, more or less. Many of them were in Europe, where it is easy to move from one place to another and where you can sometimes cross countries without even noticing. (True story: I once missed a whole country because I fell asleep on the train.)
When choosing where to go next, keep in mind the following.
Reliable Access To Internet
You’ll never know how good the Internet connection is until you get there, but at least you can research which countries have the best and worst. This is important. Even if you’re tempted to spend a few days in the middle of a forest, if there is no access to Internet, it will probably be a no-go.
Choose a place where you’ll be in the same time zone with the rest of your team, or maybe a couple of hours ahead or behind. You’ll thank me when you have to schedule your first online meeting and it’s not 4:00 am.
I’ve said that I can work from almost anywhere, but I have to make sure that my next destination at least has some good coffee shops, libraries or coworking spaces. You could also work from your hostel, hotel or rented flat, but then you’d have to make sure it’s a proper environment to work in.
It’s always good to be surrounded by like-minded people, so many times before going somewhere, I’ll check whether there’s a designer, a design studio or a meetup where I could visit and get in touch with others. Luckily, some people are always willing to meet new pals, and they’ll give you good insight into how the local design community works. You can exchange and share tools of the trade, and you can make new friends as well.
In my case, sending some emails in advance enabled me to meet such talented people as Michael Flarup in Copenhagen and Sacha Greif in Osaka. Just don’t be afraid to ask if you can drop by for a short visit!
Besides that, other factors are at play when you’re deciding where to go: affordability, transportation, safety, weather, etc. Fortunately, Nomad List rounds up the “best” cities,, which you can use as a reference when choosing where to head to next.
Of course, sooner or later, you’ll make some mistake. I’ve learned the hard way that planning where to work is indeed important. I once had to take a few unintended days off when I took the Trans-Siberian train to go from St. Petersburg to Beijing via Mongolia. At some point, the temperatures in the middle of Siberia were so low — the worst day was -50º Celsius — that my phones’ batteries suddenly drained — and being lost in the middle of a snowy small town is anything but fun. (The Russians there thought I was crazy for traveling during winter, and I now know they were right. But if you are like me and go there during wintertime anyway, always keep a paper copy of directions and important information, and bring warm boots and a pocket-sized bottle of vodka.)
Packing And Gear
If you already have a job and know where you are heading to, then you are ready to pack! Someone once said that before starting a trip, you should take half the things you plan to carry and double the money you have budgeted. While the last thing is not always an option, packing light is doable! You’ll thank me when you find your accommodation is uphill.
I started traveling with a 50-liter backpack for my personal things, and a smaller one for work-related items that I carry separately. After some time, I switched the smaller one for a daypack that I can roll up and put into the big one when I don’t need it. Everything (including the laptop) weighs 10 kilograms or so, but I keep assessing what else can I take off in order to have fewer things to carry. Similarly to when working on a design, try to get rid of the unnecessary.
For my work, I chose a MacBook Air because I knew I was going to travel a lot, and I wanted something lightweight and compact. Even though it’s a bit old now, it’s been enough for my requirements so far. I also carry two phones (iPhone and Android, with their corresponding chargers) because I do a lot of UX design for mobile and I often need to test on different devices.
I do have more gadgets and stuff, of course. I carry a remote to control my slides (for conferences and workshops), all kinds of adaptors, and noise-cancelling headphones (very useful for when you travel by train or plane.) But, in general, it is a good idea not to over-buy in advance, and pick up items only when you need them.
Where To Work
I have worked in all kinds of places: buses, trains, coffee shops, airport lounges, libraries, shared rooms in hostels, private rooms in hotels — sometimes anywhere I can set my laptop horizontally… or kind of. I’ve even gotten used to not using a mouse at all, because there is not always a place to put it next to my laptop.
Chances are the room where you stay is also going to be where you will work, so choose carefully. Airbnb is now pretty much widespread, so renting your own room with a desk should be enough — but be sure to mark “laptop friendly” in the search filters.
I try to keep a low budget, so most of the time I stay in a hostel. After a bit of training, I’ve learned to identify places that look better for work — like ones with spacious common areas — just by looking at the pictures. Of course, “party hostels” are not an option if you want to get work done, so if you see a lot of people having fun on the property’s website, that’s a red flag.
One of the main problems is that you never know how good the Internet connection will be. So, if you have difficulty with the Wi-Fi at your hostel, go to a coffee shop, coworking space or even a public library. (Interestingly, public libraries are where I’m most productive, perhaps because of the silence and the fact that I cannot make calls or participate in online meetings.)
Tip: More than once, I’ve visited a coworking space and offered to give a free design lecture to members in exchange of a few days’ worth of using a desk. It’s also nice because afterwards people will know who you are and will approach you openly to share ideas! Feel free to try it yourself.
Finally, a couple of websites could be useful when you’re looking for a place to work — namely, Workfrom and Places to Work.
Things To Keep In Mind When Living On The Road
A few things are important for any traveling designer but are too complex to address completely in one article, so I’ll just briefly mention a few of them, in the hope that it will still be useful.
Please keep in mind that everybody’s situation is different. There’s no one-size-fits-all answer, so you might have to adapt the following to your case.
What is convenient for you will depend on your case, and it’s difficult to advise on what’s best, so be aware of the legislation of your home country and of the country where you plan to work. I’ve also been exploring the possibilities that Estonia is offering with its e-citizenship. I’m already an Estonian e-resident, but I haven’t done anything practical with this as of yet.
Managing Your Finances
Besides keeping spreadsheets for expenses, one thing that I discovered (perhaps too late) is that it is normally far more convenient to create an account in an app such as Monzo or Revolut (and there are plenty of others, like N26), so that, when making withdrawals, you pay fewer fees and get better exchange rates. This is especially useful in places where credit or debit cards are not normal; this way, you can also avoid the excessive fees that traditional banks often charge.
Also, check the exchange rate of your home currency before arriving at your next destination. In some cases, I’ve arrived in a new country and bought a very expensive coffee because I didn’t do my homework beforehand. One app I use to avoid situations like this is Currency, an elegant and simple currency converter.
Something useful I learned when applying for a visa that requires a tentative itinerary is to book hostels and planes that you can later on cancel for free, and print out and bring those booking confirmations.
Health And Insurance
Plenty of companies offer health insurance for travel, so I cannot recommend any one of them. The only thing I can advise is not to leave home without it. An accident in a foreign country, besides being annoying, could also be very expensive. So, prepare in advance.
What I normally do is buy a prepaid SIM card in each country I stay, with a data plan that will be enough for my stay there. I do a bit of research beforehand to see which carrier has the most widespread coverage, and I check if there’s any information in English on their website to make recharges when necessary.
A SIM card is more necessary in some countries than in others. For example, in Russia, most open Wi-Fi networks require you to fill in a phone number, to which a validation code will be sent, before you are able to use the network. Japan, on the other hand, is full of convenience stores with free internet (such as 7-Eleven), so a SIM card is not so necessary. Meanwhile, Europe now has a more convenient way to handling roaming, called “Roam like at home”, and getting a new SIM card in every country is not so necessary anymore.
In any case, before buying a SIM card, make sure it will work across the country, especially if the country is large with many different regions.
Another important thing to check beforehand: Will your current phone number work in the new country? Luckily, there’s a website where you can check that information.
Preparing To Be Offline
Moving from one place to another involves a lot of time spent on the road, and in some cases you won’t have the chance to find Wi-Fi or good data network coverage. At these times, Spotify and Netflix are my best friends, because both allow me to download music and TV shows, respectively, so I can use them without an Internet connection. This was especially useful when I had to take several connecting trains to cross Siberia, spending in some cases around 30 hours straight in a railroad car before my next stop.
For the same reason, I always download a map of my next destination, using Google Maps (Maps.me has the same functionality).
If you want more information of this kind, check out another article I wrote, with more travel hacks and tips from my years of traveling.
Before I board my next train, let me tell you that becoming a nomadic freelance designer is by far one of my best decisions of my life so far. I have the flexibility that any freelancer has, but I also meet new people and see new places all the time. And it’s not as expensive as you might think. If you control your budget, traveling could be cheaper than living in a big city. So, I can afford to work four to five hours every day, and I use the rest of the time to get to know the place I’m visiting, to work on personal projects and to write articles for Smashing Magazine.
Traveling also makes it a bit hard to separate pleasure from work, because everything seems more enjoyable when you’re moving around. I’ve had to remind myself sometimes that I’m not on a vacation and to focus on getting things done. After a while, though, I’ve found a good balance. Now, I allow myself some moments to just move around, travel and enjoy the ride, doing nothing. It’s not all about work, after all!
Living like this is sometimes challenging and tiring, but I find it much richer than being in an office Monday to Friday, 9:00 to 5:00. And with all of the current technology, it’s easy for any designer to embrace this lifestyle. The most difficult part is finding a job to sustain your travel, but once you’ve found it, the next part is just to let it flow.
The nomadic lifestyle is not right for everyone, but the only way to know for sure is to try. Neale Donald Walsch once said that life starts where your comfort zone ends, and I completely agree. If you can afford to take the risk, go for it and enjoy a part of life that might not last long but will give you a life-changing experience, teach you new things and change the way you see the world forever.
If, for some reason, it doesn’t work, you can always go back to your previous life, right? Whether you are ready to give it a try or still have some questions about it, feel free to let me know. I’ll do my best to help you out. See you on the road!
Every design decision is a decision made on behalf of other people, those we often refer to as “end-users.” As the creators of designed experiences used by people all over the world, it is our responsibility to think carefully about how our decisions impact the person on the other end of the conversation. Even small and seemingly insignificant decisions can have enormous implications, and ethics can help ensure the longevity of our designs and help us carve paths to better futures for everyone.
Earlier this month, a friend reached out with a question:
How hard would it be to use the processing power of computers visiting their site to mine for cryptocurrencies?
The first I heard of cryptocurrency mining (cryptojacking for short) through websites was a news story from September 2017 about a script found on the website of a TV network called Showtime. Since then, similar scripts have appeared on everything from government websites to good old-fashioned blogs. Sometimes the scripts are put there by hackers (first documented by Scott Helme), other times by the site developers themselves.
In response, I told my friend “this is an ethical question more than a practical one” and sent a series of questions back:
What world are you building for your visitors? What capabilities are you granting or enabling?
What kind of person do you become by doing this, and is that the kind of person you aspire to be?
Would you want every other person in your position to make the same decision you just made? Are you upholding your duties of care?
Does this improve the lives of everyone affected?
I created these questions as a basis of an ethical framework for design decisions. They enable us to think not just about what, how, and why we do things but also to what end and they remind us to put “ought” before “can” when decisions need to be made.
“Ethics” is the word du jour in tech, and it’s for a good reason. As the connected age emerges into adulthood, we are coming to terms with the consequences of decisions made in garages and coffee shops and dorm rooms years ago; solutions built to keep us engaged are distorting our understanding of reality. Platforms built to connect us are becoming breeding grounds of hatred and division. It turns out that even small choices can have a monumental impact when amplified through a user base of billions.
It’s about time that we, the people who build the web, initiate a conversation about where we are and where we want to go, about how we define and measure goodness and rightness in the digital realm, about responsibility, about decisions and consequences, about building something bigger than our own apps. It is time we talk about the ethics of web design.
In this article, we will cover:
The current state of ethics in design and technology;
The basic design ethics framework;
How to evaluate consequences of our work;
What norms and expectations are we establishing with our work;
What type of person do we become in the process;
What environments are we building for the end-user;
The Ethical Principles of Web Design (checklist)
Ethics And Design
Every design decision is a decision made on behalf of our users. As the creators of designed experiences used by people all over the world, it is our responsibility to think carefully about not just how we do something at a technical level or what goals we are trying to achieve for ourselves or our clients or companies, but why we do it and how our decisions impact the person on the other end of the conversation. With every decision, we have the shared opportunity and responsibility to think about the ethics of web design, not just as a high flying ideal about doing no harm or doing the right thing, but as a fundamental part of our everyday process.
Rather than a wet moralistic blanket covering the fires of creativity, I aim to show how ethics can be the hearth that makes our creative fires burn brighter, without burning down the house.
The good news is we are not heading into an unexplored wilderness. The world of ethics is well traveled and the cowpaths are all but paved. For centuries, philosophers have grappled with the same questions we now face in the tech industry: how to make decisions that bring more good than bad into the world, to whom and for what we are responsible, how to measure success not just in more wealth for ourselves but also in the betterment of life for everyone. Using their theories as our foundation, we can establish a framework for the ethics of web design that help us make better decisions for everyone both today and in the future.
Ethics can and should be a core component of web design and computer sciences in general. The challenge is that ethics is not a label, it’s a practice. In the tech community, ethical principles tend toward grand statements and nice sounding rules like “don’t be evil” or “do the right thing” without anchoring these rules in the solid foundation of an ethical framework. These rules provide an air of ethical decision making while laying the groundwork for moral relativism.
It’s easy enough to say “do no harm,” but if you don’t also define what you mean by “harm”, to whom this harm can be done, and who judges whether or not harm has been done, these words have little to contribute except to make us feel good. If we say we want to do good but don’t have clearly established definitions of what good is, how we judge whether something is good, and why we want to do good in the first place, we have effectively granted ourselves a license to do anything we want — a textbook example of subjective moral relativism.
On the flipside, if some industry or government body makes a list of good and bad acts and declares it the law of the web design lands without providing an ethical framework to make and test these judgments, the door is opened to authoritarian moralism and the inevitable stifling of creativity.
We Need An Ethical Framework
Ethics can provide a framework for careful consideration of the decisions we make and their outcomes, and give us the tools to make better decisions and think more broadly about the implications of our work and actions. An ethical framework for web design should provide tools to objectively judge the value of individual decisions and actions based on agreed-upon principles. Rather than declare every decision or act of a certain type always good or bad, it should grant us the ability to see every decision in its context and judge it based not only on its intentions or outcomes but also on whether it should be a best practice, what virtues it promotes, and what capabilities it grants and enables for those affected.
I propose we use the lessons from four moral philosophies as the piers of a bridge to carry future web designers over the ethical marshlands we find ourselves mired in.
In this context the term “web designer” is a broad umbrella covering anyone who makes decisions about the function, functionality, appearance, and interactivity of a web experience, and “web design” a term covering the craft and work of a web designer. Though we commonly think of a “web designer” as the person literally designing the appearance of what is displayed on a screen, the reality is everyone — from back-end developers through information architects, content strategists, UX and UI designers, even content creators — makes design decisions that impact the experience of the people who use our creations. Databases are designed. So are content models and navigation patterns and taxonomy structures and headlines.
Ethical Framework (The Short Version)
Before we dive in, let me give you the short version: a mnemonic device that will help you see where we’re going in this article and help you remember to check the Ethical Principles of Web Design every time a decision is made. I call it the “Bridge of Ethics”:
The Bridge of Ethics allows a designer to cross ethical marshlands by passing over four piers representing the four moral philosophies covered in this article. Each pier has central questions to be answered:
What world are you building for the end-user? What capabilities are you granting or enabling?
What type of person do you become in the process?
What norms and expectations are you establishing? Are you upholding your duties of care?
What are the consequences of your decision? Do they improve the common good of those affected?
When evaluating a new design decision, start from the left establishing what capabilities you grant or enable in the end-user and then move to the right. When evaluating an existing design or service, start from the right establishing the consequences created by the decision and move to the left.
With that image in your head, let’s get crackin’!
A Practical Example To Lead The Way
To make sense of how the Ethics of Web Design would work in a real setting, I’ve built this article around a practical example which looks at how we can use ethics to tackle one of the hard problems of the web: Making money from publishing content online.
Meet Maiken and Kenneth, cat aficionados and online entrepreneurs. They have an online store where they sell products, some of their own creation, some as resellers. Now they want to set up a website where they share tips and tricks about their passion (cats) and earn a bit of passive income in the process.
Ever since web design and development became accessible to the masses, everyone from bloggers to website- and web service owners have tried to figure out how to turn online content into cold hard cash. The first, and most prominent way of doing this is through online advertising; placing ads throughout the site, either in dedicated areas or intermingled with the content, and charging the advertisers either based on impression (someone sees the ad), interaction (someone clicks the ad), or both.
Maiken and Kenneth see advertising as a possible revenue stream and want to implement advertising in an ethical way. This brings us to the first pier of the Bridge of Ethics:
1. Consequentialism: The Many Before The Few
The predominant ethical theory in most industries is consequentialism, more specifically utilitarianism (more in-depth analysis). In short, an act that benefits the majority is considered good even if a minority suffers as a result because the overall utility of the act is positive. To put an edge on it, in consequentialism the ends justify the means, and in utilitarianism, any act is considered good if the resulting benefits outweigh the costs.
Utilitarianism In The Tech Space
Consequentialist and Utilitarian ethics are woven into every aspect of the tech space. We find them in our decision making processes and procedures any time we base our decisions on their overall utility: “Will the majority of our users benefit from this new feature?” “Can this bug be ignored since it only impacts a small percentage of users?” “Can we make this decision on behalf of our users to reduce the complexity of the interface?”
From a business standpoint, this makes sense: If the majority of users are happy, the business thrives. But this approach also opens the door to implicit or explicit bias and discrimination: If the only thing that matters is maximizing utility, ignoring or causing harm to a minority becomes acceptable. This is further complicated by our inability to accurately predict the consequences of our decisions and look at a situation from a neutral position devoid of our own privilege and bias.
Utilitarianism Puts Marginalized Groups On The Sidelines
A prime example of this is web accessibility. For decades web designers have used utilitarianism as an excuse for not building accessible web solutions. Arguments around complexity, cost, and “design limitations” are in reality judgments of utility: Web designers often conclude that the utility gained by people dependent on accessible solutions is outweighed by the utility of time-, cost-, and design efficiency gained by not considering accessibility.
And accessibility is not the only example. As an example, consequentialist ethics can be used to justify underserving or outright ignoring users of inexpensive technologies with older browsers on slower networks in rural areas and countries we can’t place on a map. Talk to any front-end web developer about Internet Explorer support, and you’ll see this in action.
Different vantage points
When Maiken and Kenneth explore the ethics of placing advertisements on their website, they first need to look at their decision from the perspective of a consequentialist: Do the ads on the website maximize utility for the affected parties?
If we look at the ads in isolation, the answer is a resounding “no.” Very few people want to be exposed to ads, and those ads are often distracting, reduce performance, and “cheapen” the experience of visiting the site. If, on the other hand, we zoom out a bit, it can be argued that ads maximize utility because ads on a page pay for the content and access to it. The site owner pays the cost of content creation and hosting through ad revenues, the consumer pays for access by letting themselves be exposed to ads.
Does that mean Maiken and Kenneth have the consequentialist stamp of approval to put ads on their site? It depends.
Consequentialism’s blind spot
When we use maximizing utility as a measure for the rightness or wrongness of an act, we have to remember consequentialism has a massive blind spot: The future. Considering only immediate consequences, or only consequences within ideal use cases, will invariably lead to unintended and often problematic events further down the road. In their book, Design for Real Life, authors Eric Meyer and Sara Wachter-Boettcher provide multiple examples of this, including Facebook’s “Year In Review” feature surfacing cheerful photos of Meyer’s daughter who passed away earlier that year. Unless we take steps to ensure we think beyond the immediate consequences of our decisions, bad things may well happen just beyond the horizon. This is exactly what happened when we made advertising the primary revenue model for the web.
When ad revenue is calculated from impressions and interactions (clicks), the value being traded is attention, a finite resource granted to the site by its visitors. The more attention the visitor gives a site, the more ad revenue the site owner receives. This creates an environment where the site owner will start building content and interactions with the explicit goal of keeping the attention of their visitors and expose them to ads. In theory, this seems like a good thing. We’d all like to believe better quality content gets more attention. The reality is not as rosy.
How Utilitarianism Influenced Elections
Online ads are primarily served up by two companies: Google and Facebook. These companies share the same interest as the site owners: grabbing the attention of the visitors. To do this, social media sites and video sharing sites and search engines have created “personalized” streams where algorithms figure out what type of content an individual is engaged by and subject them to more of the same content. You can see this for yourself: Go to YouTube and watch a video of something new, like a song by Animals as Leaders, and your recommended stream will suddenly skew toward jazz metal, a musical genre you might not even have known existed just a few minutes ago. Watch more videos, and Google pegs you as “fan of jazz metal” and “likely interested in non-standard guitars.”
To make this personalization as accurate as possible, advertising services use pervasive tracking and surveillance to follow users as they travel from site to site and create models of what type of content they are most likely to spend time looking at. The same services then use their other platforms (search, social media, video/photo sharing) to expose you to more of the same, whether that be jazz metal, cute cats, or partisan politics.
This phenomenon has a name: “Filter bubble.” We were warned of these personalized echo chambers in which web users find vastly different content when making the same searches — skewed to their personal, political, and religious convictions years ago.
In short, advertising as a revenue model for the web led to user tracking, filter bubbles, fake news, and eventually worldwide political upheaval.
With this in mind, does advertising pass the consequentialist test? Does it maximize utility? No. At least not the type of predatory advertising we see today.
That doesn’t mean Maiken and Kenneth can’t have advertising on their site; it just means they have to think carefully about what type of advertising they use. That’s where the first pier of the Bridge of Ethics, the Consequentialist Principles of Web Design, comes in:
Using Consequentialism in Web Design
Consequentialist and Utilitarian ethics reminds us to consider the consequences of our actions and to measure their utility. When using consequentialism, we need to be aware of its shortcomings: It’s easy to imagine short-term consequences, much harder to see long-term consequences. And we can’t grant ourselves license to put the benefits of some users over the disadvantages of others, even when doing so maximizes utility. This is especially important when the benefits of a company or its shareholders are weighed against the disadvantages of marginalized users. Being cognizant of these issues we can draw on the best qualities of this theory:
The Consequentialist Principles Of Web Design:
Prioritize the increased utility for all over maximizing utility for the majority.
Provide sufficient remedies for those disadvantaged as a consequence of a decision.
Expect unexpected outcomes.
Favor iterative enhancements over permanent solutions.
To put these principles into practice, use a consequentialist checklist at the bottom of the article to guide decision-making processes.
When Maiken and Kenneth use these principles to evaluate advertising as a revenue model for their site, they are able to draw several conclusions:
Ads disadvantage visitors by adding distraction and increasing load times, To avoid this, they must keep ads to a minimum, and place them in areas of the layout that do not distract the visitor from the content.
Ad networks track user behavior not only on their site but on other sites. When someone visits a site, they do not have a reasonable expectation of being tracked by an ad network. For the visitor, utility is harmed by such software, in particular, because it contributes to trapping them in filter bubbles. Therefore, ad networks are not an option for this project.
For full transparency, visitors need to know why they are being exposed to advertising on the site and what type of relationship the site owners have to the advertisers. A short blurb explaining why there are ads on the site (i.e. “we use ads to pay for hosting costs and to give you free content”) and clear indicators any time there is a relationship between the site owners and the advertisers are required.
Direct marketing such as affiliate links must be marked as such. Any time the site owner financially benefits from a visitor clicking a button, they are incentivized to get the visitor to click that button. This can lead to misleading and coercive designs and content and must be avoided.
Based on this, Maiken and Kenneth realize that while they are able to use ads in an ethical way, eliminating ad networks as an option means doing direct ad sales and managing the ads on their own or hiring someone to do it for them. Either way, it adds time, complexity, and cost to the project, so they put ads on hold as they look for other less labor intensive options.
One new revenue model that pops up is using visitor computers to mine for cryptocurrencies. This brings us to the second pier of the Bridge of Ethics:
2. Deontology: The Rule Of Moral Duty
Deontological Ethics (also known as ‘Duty’ or ‘Obligation Ethics’) judges the rightness or wrongness of an action based on defined rules. Compared to consequentialism, the moral judgment of an act in deontology is based on the act itself — not its consequence. If an act was performed in obligation to the rules, it is considered a good act even if the consequence is a bad one.
Deontology In Web Design
Deontological ethics are found throughout our society and in our professional spaces. We choose not to harm others or steal their property because we have an obligation to follow rules of law and we believe others have that same obligation. We follow ethical protocols not to harass or assault our co-workers because we have an obligation to respect the freedom and security of person in all people, and we believe others have that same obligation.
A clear example of deontology in web design is web standards: There is no higher reason why we must follow web standards to create a web document, but we do so anyway because we have a duty of care; to the site owner who wants their message communicated to the visitor; to the visitor who wants the document to render properly in their browser; to the browser who wants to parse content it can understand; to the web community members who want to build new web documents without having to create separate solutions for each browser and device.
Challenges of deontology
This example also illustrates the challenge of deontology. It rests on one key assumption: You don’t merely follow the rules because they exist, you follow them because you have a duty to do so and want everyone else to feel and act on that same duty. Which raises some obvious questions:
Who makes the rules? What authority do they have to impose those rules on us? And why do we have a duty to follow them? In web design, there are no clear answers, in large part because unlike other professions web design has no unified professional leadership or authority.
Another major problem is we can’t make rules for everything, and we especially can’t make rules for things that haven’t happened yet or things that are happening for the first time.
Act as you want every other person to act in the same situation
“Act only according to that maxim by which you can also will that it would become a universal law.”
In plain language, this translates to something like “every time you do something, do the thing every person should do in the same situation.” For those familiar with the Golden Rule, “Do to others what you want them to do to you”, this will sound familiar, though it’s not exactly the same.
According to the categorical imperative, an act is only good if it can be a universal law, so even if a company is OK with users posting abusive content on their platform that does not mean allowing such content on all platforms is justified and should, therefore, be a universal law.
Kant invokes universality and obligation to grant each of us license to make moral judgments without having to agree to a predefined set of rules. The categorical imperative tells each individual actor to turn the spotlight on themselves and ask if their act is one they’d want every other person to perform in the same or similar situations, and relies on the obligation to ensure this principle is followed. In other words, it asks us to judge our actions not just on whether we think they are good and want others to do the same, but whether we think everyone should do it.
The question isn’t whether they can do it, but whether every website ought to use this technology. There is also a question whether the couple upholds their duty of care to the visitor by mining coin on their computer. That’s where the second pier of the Bridge of Ethics, the Deontological Principles of Web Design comes in:
Using Deontology In Web Design
Deontology enables us to create rules and systems to enforce those rules but falls short when new situations for which there are no rules occur or edge cases are encountered. Kant’s categorical imperative can be a partial buffer for these circumstances, but applying it is tricky and often results in using the Golden Rule instead which relies too heavily on the individual actor and their personal moral beliefs. Being cognizant of these issues we can draw on the best qualities of this theory:
The Deontological Principles of Web Design
Follow existing rules, best practices, and guidelines.
Use the categorical imperative as a starting point to creating new rules.
When no rule exists, use the full ethical principles of web design to create new ones.
Uphold the duty of care: to the client, to the user, to the information, and to the future.
To put these principles into practice use, a deontological checklist at the bottom of the article to guide decision-making processes.
Using these principles, Maiken and Kenneth evaluate the ethics of cryptojacking on visitors’ computers as a revenue stream and draw some immediate conclusions:
This approach is transactional, trading access to content for the usage of several limited resources including electricity, internet bandwidth, and processing power. If several sites did this simultaneously, the visitor would end up with higher power and internet bills and see a significant slowdown of the performance of their computer. In other words, if everyone did it, the internet would pretty much stop working. The categorical imperative is clear here: Unless you can turn your act into a universal law, it is not ethical.
Even if they ignore the categorical imperative, they still have a duty of care to the visitor. Because this is a transaction, it is the duty of the site owners to clearly notify the visitor of what is happening and allow them to opt into the feature. This limits the usefulness of the feature as few people would say yes to using their processing power if they had a choice. Maiken and Kenneth could remedy this by making access contingent on opting in, effectively creating a cryptojacking paywall similar to what Salon.com is testing, but that would go against the premise of their site which is to share information with everyone. It also brings up issues around paywalls, something we’ll address later.
In their discussion, they also discover one of the key issues with deontology: The theory is appealing because we are surrounded by rules and know how to follow them. But unless these rules are defined, agreed upon, and followed and there are consequences when they are broken, deontology quickly leads us to moral relativism.
Without rules, enforced by an agreed upon authority, everyone can do anything they want. And even with rules and enforcement in place, people will bend or break them to get ahead. In other words, even if they decide cryptojacking is not ethical, some content publishers and others think it’s perfectly acceptable.
So, as the saying goes, if everyone else is doing it, why can’t they? This brings us to the third pier of the Bridge of Ethics:
3. Virtue Ethics: Aspirational Foundations
Virtue Ethics is the oldest of the ethical traditions covered in this article, and likely also the one most foreign to our way of thinking about ethics on a day-to-day basis. Where consequentialism looks at the outcomes of actions and deontology looks at the act itself, virtue ethics looks at the actors themselves; their reasons for performing the act and what they become through the act.
A Virtuous Person Is One Who Acts As Someone Who Holds These Virtues
To understand this, we first need to understand what a virtue is, a topic that supporters of virtue ethics have debated for thousands of years.
We can turn to ancient philosophy for some guidance here. Socrates argued that virtue is knowledge: the more knowledge you acquire, the more virtuous you become and the more likely you are to make the right decisions in any circumstance. Aristotle proposed a list of 18 moral and intellectual virtues including courage, temperance, truthfulness, modesty, intelligence, logic, good sense, and theoretical and practical wisdom. In the millennia since, philosophers have proposed other virtues and created other systems. In the book, Technology and the Virtues (published in 2016), philosopher Shannon Vallor proposes 12 “technomoral virtues”: Honesty, Self-Control, Humility, Justice, Courage, Empathy, Care, Civility, Flexibility, Perspective, Magnanimity, and Technomoral Wisdom.
The overall principle remains the same: A virtuous person is one who acts as someone who holds a defined set of virtues.
The question facing Maiken and Kenneth, about whether other people doing something gives them license or leave to do the same, is one of virtue. To answer it they need to dig deep and consider what type of people they want to be.
Virtue Ethics In Web design
To understand virtue ethics in web design we need to answer the question “what makes a virtuous web designer?” To answer this, we first need to decide what virtues a web designer should aspire to. There is no one true answer here, but I believe there are some virtues most web designers can agree on:
Know the craft and keep your skills current and up to date.
Uphold the duty of care to the client, the end-user, the content, and yourself.
Be fair, and ensure every end-user can access the same content.
Be honest with clients, content, end-users, and yourself.
Take intelligent risks, push norms and boundaries, move the craft forward.
Share knowledge, and help lift the skills of your peers.
Be transparent, and value the opinions of others and yourself.
Make everything you create accessible to anyone who may encounter it.
Push forward and learn new things. Own your mistakes and learn from them.
Let’s for a moment assume these are the virtues of web design. How can Maiken and Kenneth use them to make a decision? How can they act as someone who has these virtues?
Fake It ‘till You Become It
Psychologist Amy Cuddy has a famous talk about how you can “fake it till you become it” which fits well here. If they have a clear idea of how a knowledgeable, caring, truthful, courageous, collaboratory, open, accessibility-focussed, and resilient person would act in that same situation, they’ll be able to do the same thing and move themselves a bit closer to that goal of being virtuous. The reality is a bit more complex because the interpretation of what exactly constitutes knowledge or care or truth or any of the other proposed virtues will vary from person to person.
In this case, Maiken and Kenneth need to consider whether they want to be the kind of people who mine cryptocurrency on a visitor’s computer, and more broadly, whether they think that person has the virtues they aspire to. In their case the answer is ‘no’ and the earlier question, if everyone else is doing it why can’t we, answers itself.
So what would be a virtuous way of generating revenue from their website? One option Maiken and Kenneth choose to explore is selling memberships. This approach seems more egalitarian: people who have the means can pay for exclusive access, and the revenue from memberships can be used to cover the cost of limited access for everyone else. The question is if selling memberships builds the virtues the couple aspire to. That’s where the third pier of the Bridge of Ethics, the Virtuous Principles of Web Design, comes in:
Using Virtue Ethics in Web Design
Virtue ethics is the most introspective of the three moral philosophies we have looked at so far. It grants us the tools to look at ourselves as actors and recognize that with each act we perform, we not only change the outside world but also ourselves. In that way, virtue ethics compliments and resolves some of the issues raised by consequentialism and deontology.
Where consequentialism looks squarely at the external outcomes of an act and deontology looks at your reasons for performing that act, virtue ethics looks at what you become by performing that act and uses your desire to become a more skilled and knowledgeable, more successful, and overall better person as its driving force. We can draw on the best qualities of this theory to lay the third pier of our ethical bridge:
Four virtuous principles of web design:
Define and share the virtues you aspire to hold and how they describe the virtuous web designer you want to be.
Act as this virtuous web designer would act, i.e. act as the web designer you want to be.
With every act, consider what person it turns you into.
Align every act with the virtues you aspire to hold.
To put these principles into practice, use a virtual ethics checklist at the bottom of the article to guide decision-making processes.
Maiken and Kenneth want to become better people and better business people through their actions, and that extends to how they collect revenue from the site they are building. Using the virtuous principles of web design they evaluate the ethics of selling memberships as a revenue model and draw some conclusions:
The relevant virtues they aspire to are knowledge, care, equity, truthfulness, courage, collaboration, openness, access, and resilience. Any revenue model should help them move closer to these virtues.
Memberships and paid subscriptions are typically used to create paywalls where paying members get access to exclusive content. This goes against the virtues of care, openness, and access because it literally excludes non-members, keeps content closed off from the public, and restricts access to only those who can pay. To promote the virtues the couple aspires to, this means membership cannot impact access to content which takes away much of the incentive to be a member in the first place.
One possible approach Maiken and Kenneth consider is offering memberships that grant members influence rather than access; the ability to suggest new topics or even submit their own content to be published on the site. However, this can easily impact equity as the system grants those with means more influence than those without. So while it is possible to set up a membership model that passes the virtue ethics test, its return will be limited unless visitors choose to become members to support the content rather than get exclusive privileges — which is a hard bargain.
Looking At An Even Bigger Picture
Taking a step back from the question of memberships and looking at the bigger picture painted by the virtuous principles, we start to see a shift from the focus on the actor and the act to those acted upon and how they are impacted; a crucial aspect of the transaction our conversation has not yet addressed.
Consequentialism looks at outcomes divorced from the actor’s intent, deontology looks at the actor’s intent divorced from the outcome, and virtue ethics look at what the actor becomes as a result of their actions. The next question we need to ask is what about the end-user and how they are impacted. This brings us to the fourth and final pier in our ethical bridge:
4. Capability Approach: User-Centered Design
Web design is in almost every case service design: We build solutions for other people that they can use to achieve their goals. That’s why user experience design is such a big part of web design and why human-centered design is at the core of user experience and interaction design.
“The capability approach is a theoretical framework that entails two core normative claims: first, the claim that the freedom to achieve well-being is of primary moral importance, and second, that freedom to achieve well-being is to be understood in terms of people’s capabilities, that is, their real opportunities to do and be what they have reason to value.”
Capability approach is often considered an offshoot of virtue ethics, but I feel it is different enough to be considered its own moral philosophy. What matters is not just what you do or why or how you do it, but also what future you enable the person at the other end of the transaction to build for themselves!
More widely, the Capability Approach in web design allows us to take a step back and consider why we do what we do. Every design decision we make carves a path our end-users follow into the future. The Capability Approach makes us think carefully about where that path leads and what happens to the people who interact with our creations when they follow us into that future. So in addition to asking what we are going to build, how we are going to build it, and why we are building it, we have to ask to what end: If we build this, what world do we build for the visitor in the process?
Evaluating Sponsorship Models, A Capability Approach Example
In their quest for an ethical revenue model for the content on their site, Maiken and Kenneth have turned their attention to the tried and true sponsorship model, already well established in print and digital media as well as events. The sponsorship model exchanges funding for presence in some form (usually a large banner, a mention in audio and video clips, or “sponsored content”). In simple terms, sponsorship differs from advertising in that a sponsor pays an agreed upon sum of money up front for exposure to the audience whereas advertising typically pays on a per-impression or per-click basis.
To evaluate the ethical implications of sponsorships as a revenue model, they turn to the capability approach and ask what capabilities are granted or enabled on the positive side or prevented or removed on the negative side by accepting sponsorships.
They consider three sponsorship models:
Philanthropic sponsorship, i.e. “See a list of our sponsors/supporters on this page”
Passive sponsorship, i.e. “this article brought to you by…”
Active sponsorship, i.e. “And now, a word from our sponsor” aka advertorial content
The first one is the obvious preference, but it relies on companies and individuals being willing to give them money without exposure (something that rarely happens). Passive sponsorship is the most common of the three models. Here a company gets visible (or auditory) presence as a funder of the content being presented. This model works, but is only attractive to sponsors if the site has a large following and can claim to be “influential.”
Active sponsorship leaves the sponsor in charge of some content on the site. This is the more attractive option from the sponsor’s perspective and likely also where the most revenue can be collected. However, handing control of content to a sponsor has serious implications.
What Capabilities To Test For?
To analyze these three sponsorship models, we first have to define what capabilities to test for. Here capability approach suffers the same challenge faced by deontology and virtue ethics: who decides what capabilities should be in focus and how to test the success of any decision or act in terms of capabilities granted and enabled.
Control over one’s Environment (Political and Material)
Nussbaum suggests that a decision or act must be judged on whether it helps the recipient secure a minimum level of these ten capabilities.
Sen argues that when evaluating well-being, “the most important thing is to consider what people are actually able to be and do.” He illustrates this by asking us to think of a bicycle. While a bicycle is considered a transportation tool for all people, the capability of actually using a bicycle for transportation changes from person to person and context to context. Just because someone has a bicycle does not mean they have the capability of transportation. In other words, to provide the capability of transportation to a person we first have to take into consideration that person’s ability to use different transportation methods. One size rarely fits all.
Using Capability Approach In Web Design
The fourth pier of the Bridge of Ethics, the Capability Approach Principles of Web Design, focuses our attention on the end-user and their experience. The immediate value of the capability approach is its focus on the long-term outcomes of the end-user. Web designers build solutions for people, and every decision a web designer makes has a long-term impact on the people who interact with it. Thinking carefully about what capabilities each of our design decisions grant and enable, and choosing only those decisions that produce and increase the well-being of the end-user is a key component in a well-formed ethical design process. We can draw on the best qualities of this theory to lay the fourth and final pier of our ethical bridge:
The Capability Approach Principles Of Web Design
Define the capabilities you want to build in users, communities, and the world.
Design solutions that grant each user capabilities to (re)claim their agency.
Measure success by the functionings achieved and the increased well-being of every individual end-user.
With every decision, carve a path to the future you wish to live in.
To put capability approach principles into practice, use a checklist at the bottom of the article to guide decision-making processes.
Using the capability approach principles of web design, Maiken and Kenneth evaluate the ethics of various forms of sponsorships as a revenue model and draw some conclusions:
Passive sponsorships (“this content/site brought to you by”), can be argued to grant the visitor agency because they have enough information to know the relationship between the site owners and the brands that appear on the site. This assumes there is clear messaging stating “brought to you by” or “sponsored by” or similar.
The active sponsorship model (content made by the sponsors) can enable the same capabilities, though to a lesser degree, as long as this content is clearly marked as advertorial and the visitor can clearly differentiate it from other non-sponsored content.
So-called “content marketing,” the practice of creating content to build influence and drive customers toward a specific product or brand, can be considered harmful to the visitor as the content is designed to influence and even actively coerce them.
So can Maiken and Kenneth ethically use sponsorships as their revenue model? According to the capability approach, the answer is yes as long as it’s done in a way that clearly discloses all relationships and meets the visitor’s reasonable expectation of being presented with honest and unbiased content from the site owners (in other words, active sponsorships and content marketing content are out).
Using The Ethical Principles Of Web Design In Production
At the start of this article, I introduced the image of a bridge held up by four ethical theories and explained you can travel across it in both directions. Now that we’ve covered all four piers of the bridge we are ready to look at how to use this bridge in our everyday decision making processes.
When evaluating existing solutions, it’s easiest to start on the right side and move your way back, documenting real-life consequences first, then considering what rules and best practices were used, what virtues were promoted, and what capabilities were granted or enabled. This is how we typically make decisions in our industry today, though we rarely make it past consequentialism.
Put The User First
What I propose is a literal pivot; Evaluating every new decision by crossing the bridge from the left to the right. As we saw with Maiken and Kenneth, the capability approach shifted their focus from how they can make money ethically to how their revenue models impact their audience, the visitors. This is important because all our decisions, whether they be about server infrastructure or content management systems or front-end frameworks or content strategy or revenue models or social media sharing and integration need to put the end-user first, every time.
Starting with the capability approach, we first establish what capabilities we want to grant and enable in our visitors and end-users and define the future world we build for them with our solutions. Next, virtue ethics help us consider what type of professionals we become by building those solutions. Deontology reminds us to consider what best practices we establish and what duties of care we must uphold. And finally, consequentialism helps us map out short- and long-term consequences and reminds us to think carefully about how we measure utility and whether we are excluding people with our decisions.
This method puts the end-user and their experience at the center of every decision and keeps them in focus as we evaluate what those decisions do to ourselves, our craft, and the world as a whole.
Every Design Decision Is A Decision Made On Behalf Of The End-User
So, where does this leave our friends Maiken and Kenneth? How will they monetize the content on their site? Based on the evaluations in this example, their most ethical option is a combination of philanthropic and passive sponsorship and a membership model. Opt-in cryptojacking and direct sales advertising are also possibilities, but their return on investment will likely be too low to be meaningful.
Here comes the tricky part: There’s a high likelihood you disagree with some or all of these conclusions. And that’s OK! One of the most interesting parts of ethics is apart from extreme cases, how people evaluate different decisions and acts will differ, often greatly. There is rarely one true answer to any ethical question, but ask a large enough group to evaluate the question and you’ll see a strong trend in one direction.
The question you’re most likely asking yourself now is “Doesn’t that make the whole thing pointless?” The answer is “no”, and here’s why:
The purpose of the Ethical Principles of Web Design is not to create an authoritative list of good and bad decisions for all to follow any more than the principles of UX instruct designers on the one true way to design a specific interaction. These principles are tools for us to use to facilitate careful and considerate thinking about the decisions we make. More often than not, using these principles will bring up questions that would otherwise have never been discussed, and many of them will not result in full or final answers. What they will do is remind you and everyone you interact with that every design decision is a decision made on behalf of the end-user, and every decision changes their world and builds their future in some small way.
Better Futures For Everyone
Even small and seemingly insignificant decisions can have enormous implications, and though ethics often stand in the way of immediate rapid innovation, growth, and quick revenue, they help ensure the longevity of our designs and help us carve paths to better futures for everyone.
Being mindful of what we do is essential. It’s what gives us the power to create. Making ethics part of that process helps us build the world we all want to live in. Using the Ethical Principles of Web Design, you will be better equipped to make design decisions you can stand by today and in the future; decisions that help you build the future you want to live in along side every person you impact with your designs.
The Ethical Principles Of Web Design (Checklist)
This checklist is a practical tool to be used alongside other design techniques like Design Sprints and Journey Maps. Use it, expand on it, and make it your own:
What world / future are you building for the end-user?
What type of person do you become in the process?
What norms and expectations are you establishing?
What are the consequences of your actions?
1. Define the capabilities you want to build in users, communities, and the world.
2. Design solutions that grant each user capabilities to (re)claim their agency.
3. Measure success by the functionings achieved and the increased well-being of every individual end-user.
4. With every decision, carve a path to the future you wish to live in.
1. Define and share the virtues you aspire to hold and how they describe the virtuous web designer you want to be.
2. Act as this virtuous web designer would act – ie act as the web designer you want to be.
3. With every act, consider what person it makes you become.
4. Align every act with the virtues you aspire to hold.
1. Follow existing rules, best practices, and guidelines.
2. Use the Categorical Imperative as a starting point to creating new rules.
3. When no rule exists, use the full ethical principles of web design to create new ones.
4. Uphold the Duty of Care: to the client, to the user, to the information, and to the future.
1. Prioritize the increased utility for all over maximizing utility for the majority (no person left behind).
2. Provide sufficient remedies for those disadvantaged as a consequence of a decision (every user matters).
3. Expect unexpected outcomes (the future is unknown).
4. Favor iterative enhancements over permanent solutions (never settle/all paths are open).
1. What capabilities does this decision grant and/or enable in the end-user?
2. Do these capabilities increase the functionings of the end-user, what they are capable, want to be capable, or should be capable to be and/or do?
3. Does this decision lead the end-user on a path to a future where their well-being is improved?
4. Does this decision grant agency to the end-user and leave them in control over their freedom and future?
1. What virtues are relevant in this decision? Knowledge, care, courage, openness, other virtues or a combination of virtues?
2. How will this decision move you closer to holding these virtues? What path are you laying down for yourself by making this decision?
3. Is this decision the same as what the virtuous web designer you want to become would make?
4. When you look back on this decision in the future, will you see it as a good and virtuous decision?
5. Are you able to communicate how this decision will bring you closer to your ideal of being a virtuous web designer to someone else?
1. Are there existing rules to be followed? Do you understand them and are they applicable in this situation?
2. If no rule exists, can you create a new universal rule everyone should follow in the same or similar situation?
3. Are you comfortable with your decision being published on the front page of a major newspaper?
4. Have you sought confirmation from peers or subject matter experts?
5. Are you upholding the Duty of Care to your client?
6. Are you upholding the Duty of Care to the end-user?
7. Are you upholding the Duty of Care to the content?
8. Are you upholding the Duty of Care to yourself?
1. Who benefits from this decision, and why?
2. Who is disadvantaged by this decision, and why?
3. How is utility/disadvantage from this decision measured?
4. Who decides what utility/disadvantage ratio is acceptable?
5. How are disadvantages created by this decision addressed and reduced / remedied?
6. How flexible is this decision? Is there sufficient room for course corrections?
7. Who and what are the outliers we have not considered?
8. Assuming this decision has unintended consequences, what are they and how do we deal with them?
Where To Start?
When I talk to people about ethics and the bridge I’ve described in this article, I often get responses such as “I see why it matters, but I don’t think this will fit into my/our process.” This is a fair critique. Decision making based on an ethical framework is not something we are used to doing, in web design or anywhere else in our lives. For the most part, ethics is something subconscious and unspoken; we “just know” or have a “gut feeling” whether something is right or wrong.
Formalizing a method for testing the ethics of a decision is a skill like any other, and it requires practice to become natural. The good news is you can lean on your own built-in ethical barometer (that “gut feeling” about the rightness or wrongness of an act) and use the simplified version of the bridge to get started. To apply the Ethical Principles of Web Design in your practice today, start with the mnemonic devices for each theory:
What world are you building for the end-user? What capabilities are you granting or enabling?
What type of person do you become in the process?
What norms and expectations are you establishing? Are you upholding your duties of care?
What are the consequences of your decision, and do they improve the common good for those affected?
As you’ve learned, these principles are not about creating a dogmatic list of right and wrong, but rather a toolkit to help you explore questions around the ethics of your decisions.
To help you explore each of these questions in more detail, you can use the checklist provided above.
Once asking these questions becomes second nature, dive deeper into the individual theories that make up the piers of the bridge and establish a deeper understanding of what ethics and moral philosophy are, and why it plays a role in all aspects of our lives.
To get you started, I’ve assembled a list of resources below. Some of the links are from the article, some are added as further reading.
In the end, ethics is a practice we all need to work on every day. To borrow a quote from Robert M. Pirsig:
“The place to improve the world is first in one’s own heart and head and hands, and then work outward from there.”