Collective #508

Front-end Developer Handbook 2019 Cody Lindley wrote this guide that outlines and discusses the practice of front-end engineering, how to learn it and what tools are used when practicing it in 2019. Check it out Our Sponsor Visual Composer founder had an AMA Read more

How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)

dreamt up by webguru in Uncategorized | Comments Off on How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)

How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)

How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)

Robert Aboukhalil



If you haven’t heard, here’s the TL;DR: WebAssembly is a new language that runs in the browser alongside JavaScript. Yes, that’s right. JavaScript is no longer the only language that runs in the browser!

But beyond just being “not JavaScript”, its distinguishing factor is that you can compile code from languages such as C/C++/Rust (and more!) to WebAssembly and run them in the browser. Because WebAssembly is statically typed, uses a linear memory, and is stored in a compact binary format, it is also very fast, and could eventually allow us to run code at “near-native” speeds, i.e. at speeds close to what you’d get by running the binary on the command line. The ability to leverage existing tools and libraries for use in the browser and the associated potential for speedup, are two reasons that make WebAssembly so compelling for the web.

So far, WebAssembly has been used for all sorts of applications, ranging from gaming (e.g. Doom 3), to porting desktop applications to the web (e.g. Autocad and Figma). It is even used outside the browser, for example as an efficient and flexible language for serverless computing.

This article is a case study on using WebAssembly to speed up a data analysis web tool. To that end, we’ll take an existing tool written in C that performs the same computations, compile it to WebAssembly, and use it to replace slow JavaScript calculations.

Note: This article delves into some advanced topics such as compiling C code, but don’t worry if you don’t have experience with that; you will still be able to follow along and get a sense for what is possible with WebAssembly.

Background

The web app we will work with is fastq.bio, an interactive web tool that provides scientists with a quick preview of the quality of their DNA sequencing data; sequencing is the process by which we read the “letters” (i.e. nucleotides) in a DNA sample.

Here’s a screenshot of the application in action:


Interactive plots showing the user metrics for assessing the quality of their data
A screenshot of fastq.bio in action (Large preview)

We won’t go into the details of the calculations, but in a nutshell, the plots above provide scientists a sense for how well the sequencing went and are used to identify data quality issues at a glance.

Although there are dozens of command line tools available to generate such quality control reports, the goal of fastq.bio is to give an interactive preview of data quality without leaving the browser. This is especially useful for scientists who are not comfortable with the command line.

The input to the app is a plain-text file that is output by the sequencing instrument and contains a list of DNA sequences and a quality score for each nucleotide in the DNA sequences. The format of that file is known as “FASTQ”, hence the name fastq.bio.

If you’re curious about the FASTQ format (not necessary to understand this article), check out the Wikipedia page for FASTQ. (Warning: The FASTQ file format is known in the field to induce facepalms.)

fastq.bio: The JavaScript Implementation

In the original version of fastq.bio, the user starts by selecting a FASTQ file from their computer. With the File object, the app reads a small chunk of data starting at a random byte position (using the FileReader API). In that chunk of data, we use JavaScript to perform basic string manipulations and calculate relevant metrics. One such metric helps us track how many A’s, C’s, G’s and T’s we typically see at each position along a DNA fragment.

Once the metrics are calculated for that chunk of data, we plot the results interactively with Plotly.js, and move on to the next chunk in the file. The reason for processing the file in small chunks is simply to improve the user experience: processing the whole file at once would take too long, because FASTQ files are generally in the hundreds of gigabytes. We found that a chunk size between 0.5 MB and 1 MB would make the application more seamless and would return information to the user more quickly, but this number will vary depending on the details of your application and how heavy the computations are.

The architecture of our original JavaScript implementation was fairly straightforward:


Randomly sample from the input file, calculate metrics using JavaScript, plot the results, and loop around
The architecture of the JavaScript implementation of fastq.bio (Large preview)

The box in red is where we do the string manipulations to generate the metrics. That box is the more compute-intensive part of the application, which naturally made it a good candidate for runtime optimization with WebAssembly.

fastq.bio: The WebAssembly Implementation

To explore whether we could leverage WebAssembly to speed up our web app, we searched for an off-the-shelf tool that calculates QC metrics on FASTQ files. Specifically, we sought a tool written in C/C++/Rust so that it was amenable to porting to WebAssembly, and one that was already validated and trusted by the scientific community.

After some research, we decided to go with seqtk, a commonly-used, open-source tool written in C that can help us evaluate the quality of sequencing data (and is more generally used to manipulate those data files).

Before we compile to WebAssembly, let’s first consider how we would normally compile seqtk to binary to run it on the command line. According to the Makefile, this is the gcc incantation you need:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

On the other hand, to compile seqtk to WebAssembly, we can use the Emscripten toolchain, which provides drop-in replacements for existing build tools to make working in WebAssembly easier. If you don’t have Emscripten installed, you can download a docker image we prepared on Dockerhub that has the tools you’ll need (you can also install it from scratch, but that usually takes a while):

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Inside the container, we can use the emcc compiler as a replacement for gcc:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

As you can see, the differences between compiling to binary and WebAssembly are minimal:

  1. Instead of the output being the binary file seqtk, we ask Emscripten to generate a .wasm and a .js that handles instantiation of our WebAssembly module
  2. To support the zlib library, we use the flag USE_ZLIB; zlib is so common that it’s already been ported to WebAssembly, and Emscripten will include it for us in our project
  3. We enable Emscripten’s virtual file system, which is a POSIX-like file system (source code here), except it runs in RAM within the browser and disappears when you refresh the page (unless you save its state in the browser using IndexedDB, but that’s for another article).

Why a virtual file system? To answer that, let’s compare how we would call seqtk on the command line vs. using JavaScript to call the compiled WebAssembly module:

# On the command line
$ ./seqtk fqchk data.fastq

# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

Having access to a virtual file system is powerful because it means we don’t have to rewrite seqtk to handle string inputs instead of file paths. We can mount a chunk of data as the file data.fastq on the virtual file system and simply call seqtk’s main() function on it.

With seqtk compiled to WebAssembly, here’s the new fastq.bio architecture:


Randomly sample from the input file, calculate metrics within a WebWorker using WebAssembly, plot the results, and loop around
Architecture of the WebAssembly + WebWorkers implementation of fastq.bio (Large preview)

As shown in the diagram, instead of running the calculations in the browser’s main thread, we make use of WebWorkers, which allow us to run our calculations in a background thread, and avoid negatively affecting the responsiveness of the browser. Specifically, the WebWorker controller launches the Worker and manages communication with the main thread. On the Worker’s side, an API executes the requests it receives.

We can then ask the Worker to run a seqtk command on the file we just mounted. When seqtk finishes running, the Worker sends the result back to the main thread via a Promise. Once it receives the message, the main thread uses the resulting output to update the charts. Similar to the JavaScript version, we process the files in chunks and update the visualizations at each iteration.

Performance Optimization

To evaluate whether using WebAssembly did any good, we compare the JavaScript and WebAssembly implementations using the metric of how many reads we can process per second. We ignore the time it takes for generating interactive graphs, since both implementations use JavaScript for that purpose.

Out of the box, we already see a ~9X speedup:


Bar chart showing that we can process 9X more lines per second
Using WebAssembly, we see a 9X speedup compared to our original JavaScript implementation. (Large preview)

This is already very good, given that it was relatively easy to achieve (that is once you understand WebAssembly!).

Next, we noticed that although seqtk outputs a lot of generally useful QC metrics, many of these metrics are not actually used or graphed by our app. By removing some of the output for the metrics we didn’t need, we were able to see an even greater speedup of 13X:


Bar chart showing that we can process 13X more lines per second
Removing unnecessary outputs gives us further performance improvement. (Large preview)

This again is a great improvement given how easy it was to achieve—by literally commenting out printf statements that were not needed.

Finally, there is one more improvement we looked into. So far, the way fastq.bio obtains the metrics of interest is by calling two different C functions, each of which calculates a different set of metrics. Specifically, one function returns information in the form of a histogram (i.e. a list of values that we bin into ranges), whereas the other function returns information as a function of DNA sequence position. Unfortunately, this means that the same chunk of file is read twice, which is unnecessary.

So we merged the code for the two functions into one—albeit messy—function (without even having to brush up on my C!). Since the two outputs have different numbers of columns, we did some wrangling on the JavaScript side to disentangle the two. But it was worth it: doing so allowed us to achieve a >20X speedup!


Bar chart showing that we can process 21X more lines per second
Finally, wrangling the code such that we only read through each file chunk once gives us >20X performance improvement. (Large preview)

A Word Of Caution

Now would be a good time for a caveat. Don’t expect to always get a 20X speedup when you use WebAssembly. You might only get a 2X speedup or a 20% speedup. Or you may get a slow down if you load very large files in memory, or require a lot of communication between the WebAssembly and the JavaScript.

Conclusion

In short, we’ve seen that replacing slow JavaScript computations with calls to compiled WebAssembly can lead to significant speedups. Since the code needed for those computations already existed in C, we got the added benefit of reusing a trusted tool. As we also touched upon, WebAssembly won’t always be the right tool for the job (gasp!), so use it wisely.

Further Reading

Smashing Editorial
(rb, ra, il)

Source: Smashing Magazine, How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)

Collective #505

dreamt up by webguru in Uncategorized | Comments Off on Collective #505




C505_CSSBattle

CSSBattle

Use your CSS skills to replicate targets with smallest possible code.

Play it











C505_gimli

Gimli

A promising looking Visual Studio Code extension enabling smart visual tools for front-end developers. You can back it on Kickstarter.

Check it out




C505_xray

x-ray

In case you didn’t know it: A simple HTML debugger, executable by bookmark, that let’s you visualize the HTML structure of a website.

Check it out





C505_shoperr

shoperr

With shoperr you can create your own custom shop in minutes, and stock up on referral links to your favorite products.

Check it out


Collective #505 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #505

Privacy UX: Common Concerns And Privacy In Web Forms

dreamt up by webguru in Uncategorized | Comments Off on Privacy UX: Common Concerns And Privacy In Web Forms

Privacy UX: Common Concerns And Privacy In Web Forms

Privacy UX: Common Concerns And Privacy In Web Forms

Vitaly Friedman



Many conversations in our industry tend to circle around strong opinions and universal answers. Choosing a shiny new technical stack or sticking to an old-school paradigm; betting on a trendy framework or building a custom light framework of your own; using an attention-grabbing pop-up or sticking to calmer, less annoying solutions. We tend to have strong opinions about design and development, and so we agree and disagree, and argue endlessly, trying to protect and explain our views. Sometimes (and maybe a bit too often) to the point that conversations escalate and result in annoyingly disgruntled camps not agreeing on anything.

It’s not the stubbornness that brings us there, though. It’s the simple fact that we all have different backgrounds, expectations, and experiences. But sometimes we end up debating answers that are all acceptable and seeking the ultimate truth in a place where it really can’t exist. This pattern shows up for the usual suspects: accessibility, performance, tooling, workflows, and naming conventions. It also repeats itself with topics that are often considered to be ephemeral: ethics and privacy.

In the past, these topics could be spotted sporadically on the remote fringes of Twitter threads and blog posts. These days we’ve become very aware of the frightening dimensions that collection and use of personal data have gradually and silently gained. So we’ve started fighting back. Fighting back by publicly complaining about privacy-related dark patterns, unsolicited emails, shady practices, strict legal regulations, and ad-blocker wars against disruptive ads from hell. Of course, these are all important conversations to have and raising awareness is important; but we also need an applicable, pragmatic approach for designing and building ethical and respectful interfaces within our existing, well-established processes. We could use a few established patterns to bake in privacy-aware design decisions into our interfaces by default.

As a part of Smashing consultancy and teaching at universities and schools, over the last several months I was privileged to run interviews with 62 customers of various ages and experiences in Belgium, the Netherlands, Germany, Ukraine, USA, Serbia, Bosnia-Herzegovina, Austria, and Canada. My objective was to ascertain the role privacy plays for users these days, and how the interfaces we so thoroughly craft are perceived when it comes to various touchpoints. The findings from these interviews are the foundation of this article series.

In this four-part series, we’ll explore some of the respectful ways to approach privacy and data collection, and how to deal with notorious GDPR cookie consent prompts, intrusive push notifications, glorious permission requests, malicious third-party tracking, and offboarding experience:

  • Part 1: Privacy Concerns and Privacy in Web Forms
  • Part 2: Better GDPR Cookie Prompts
  • Part 3: Designing Better Notifications
  • Part 4: Privacy-Aware Design Framework

Why Aren’t Privacy-Aware Interfaces a Default?

Imagine a beautiful, authentic historical street, paved with half-broken cobble stones, tiny vintage stores, and flourishing flowers randomly placed across the pathway. Sauntering along such charming streets is a wonderful experience, full of smells and sounds of the city that aren’t easy to capture in the daily stream of mundane tasks.

Now imagine the very same street packed with lookalike merchandise farms stacked right next to each other, plastered with promotional posters, blinking advertising, loud music, and repeating marketing messages fighting for your attention over and over and over again. Compared with the previous experience, that’s very different, and most likely much less enjoyable.

Unfortunately, in both of the scenarios above, the more often we walk down that same street, the more we become accustomed to what’s happening, and in the end these experiences become normal — and even expected — along that path. Over time, we tend to get used to the way things appear and function, and especially when it comes to advertising, over time we’ve learned fairly well how to dismiss the marketing messages streaming endlessly and loudly our way.

Not all marketing messages are ineffective, of course; in fact, most people are receptive to them, mostly because they are literally everywhere, often heavily personalized and hence relevant. We see them as an unnecessary evil that enables and finances our experience, be it reading an article, playing a game or watching a video. What came along with it, though, isn’t just visual noise and a substantial performance footprint of adverts, but also ever-increasing tracking, collection, and ongoing evaluation of private data.


If you’ve wondered why a product you looked up in a search engine one day keeps showing up in all your social channels over and over just a few hours later, that’s the power of data collection and retargeting at play.

As a result, many of the online experiences we attend to on a daily basis feel more broken and frustrating than refreshing and inspiring. Over years of daily training on the websites we love and hate so much, we’ve got used to it — and many of us no longer notice how distracting, invasive, and disrespectful the websites have become.

While boring pop-ups and annoying blinking ads might be easy to ignore or dismiss, sneaky push notifications, ambiguous copywriting, shady backdoors in seemingly friendly apps, and deceptive ads camouflaged as parts of the UI are nothing but a notorious, well-executed hustle. Not many website owners would willingly impose this kind of experience on their customers, and not many customers would knowingly return to a website that shared their private data for retargeting or reuse. With such experiences, trust and loyalty are at stake, and these days they are extremely rare and precious values that are hard to reacquire once they are lost.


medium’s pop-up
Pop-ups are rarely friendly and respectful, as they interrupt the experience. However, Medium goes to extremes when trying to make the interruption friendly and humble with strong, thoughtful microcopy. (Large preview)

If we ask ourselves why honest interfaces haven’t made a breakthrough yet, bypassing and pushing away all the culprits out there, it’s not easy to find an answer at first. It’s not that designers want to manipulate customers, or that developers want to make experiences slower, or that marketeers are happy to endlessly frustrate and confuse users’ experience for the sake of one-off campaigns.

In a world where every brand demands immediate and uninterrupted attention, attention has become incredibly scarce, and so competing against loud guerrilla campaigns with a subtle, humble marketing message might feel remarkably inferior. Clever, subtle campaigns can be effective, but they need to be constantly invented anew to remain interesting — and there is no guarantee they actually will work. On the other hand, it’s much easier to rely on solutions that worked well in the past — they are predictable, easy to measure, and not too difficult to sell to clients.

In fact, we tend to rely on predictable A/B tests that give us clear answers for measurable, quantifiable insights. But when it comes to ethics and the long-term impact of an interface on loyalty and trust, we are out there in the blue. What we are missing is a clear, affordable strategy for meeting business requirements without resorting to questionable practices that proved to be effective in the past.

In most conversations I’ve had with marketing teams over the years, the main backlash against all the UX-focused, customer-protective changes in marketing was the simple fact that marketing teams didn’t believe for a second that they could be as competitive as good ol’ workhorse techniques. So while, of course, calm, ethical, and privacy-aware interfaces would benefit the user, moving away from the status quo would massively hurt business and make companies less competitive.

Sadly enough, they might be right. Most of us use well-known services and websites that have all the despicable practices we so love to hate. Tracking, and collection and manipulation of data are at the very core of their business models, which allow them to capitalize on it for advertising and selling purposes. In fact, they succeed, and for many users, trading privacy is an acceptable cost for all the wonderful benefits that all those giants provide for nothing. Beyond that, moving away from these benefits is remarkably hard, time-consuming, and just plain painful, so unless a company hurts its users on a level that goes way beyond harvesting and selling data, they are very unlikely to leave.


Confirmshaming pattern
‘Confirmshaming’, one of the dark patterns used too frequently on the web. Image source: confirmshaming.tumblr. Many dark patterns are collected by Harry Brignull on darkpatterns.org. (Large preview)

Many of you might remember the golden days when the first mobile interfaces were clunky and weird and slow, and when everything seemed to be out of place, and we were desperately trying to fill all those magical rectangles on shiny new mobile phones with adaptive and pixel-perfect layouts.

Despite good intentions and wondrous ideas, many of our first interfaces weren’t great — they just weren’t good executions of potentially great ideas. As time passed, these interfaces slowly disappeared, replaced by solutions that were designed better, slowly carved out of thorough efforts in research and testing, and gradual, ongoing refinements. It’s rare we see and regularly use some of those old interfaces today. Sometimes they remain locked up in app ecosystems, never updated or redesigned, but the competition pushed them away hastily. They just aren’t competitive enough, because they weren’t comfortable enough to enable users to reach their goals.

I wonder if the same will happen with the new wave of privacy- and ethics-aware applications. Well-designed, small applications that do simple tasks very well, with a strong focus on ethical, respectful, and honest pixels, without shady backdoors and psychological tricks. We can’t expect giants to change overnight, but once these alternative solutions start succeeding, they might be forced to refine their models in response. I strongly believe that taking good care of users’ data can be a competitive advantage and a unique selling proposition that no other company in your niche has.

For that to happen, though, we need to understand common pain points that users have, and establish interface patterns that designers and developers could easily use. We’ll start with common privacy concerns and seemingly obvious interface components: privacy-related issues often raised in web forms.

Eliminating Privacy Concerns

So you designed a wonderful new feature: an option to connect your customers with their friends by importing contacts from Facebook, LinkedIn, Twitter, or perhaps even their contact list. Imagine the huge impact on your sign-ups if only a fraction of your existing customers choose to use the feature, connecting with dozens and hundreds of their friends on your wonderful platform! Unfortunately, the feature is likely to have difficulties taking off, not because it isn’t designed well, but because of the massive abuse of privacy that users have been exposed to over the years.

Remember that awkward conversation with a few friends wondering about an unusual invitation they received from you the other day? You didn’t mean to annoy your friends, of course, but the service you’ve just signed up to was happy to notify your friends on your behalf, without your explicit permission. Perhaps recommended default settings during installation contained a few too many checkboxes with ambiguous labels, or perhaps the app just wouldn’t work correctly otherwise. You didn’t think anything at the time, but you’ll definitely think twice next time, before leaving all of those checkboxes opted-in.

In general, when asked about what kinds of privacy issues customers seem to be worried about, the following concerns have been raised, in order of magnitude or severeness:

  1. Tracking and evaluating user preferences, location, and so on
  2. Convoluted privacy policy changes
  3. Lack of trust for free or freemium services
  4. Disturbing and annoying advertising in apps or on websites
  5. Targeting with commercial and political messages
  6. Unwanted notifications and marketing emails
  7. No proper control of personal data
  8. Exposing personal preferences to third parties
  9. Difficulty to delete personal details
  10. Difficulty to cancel or close account
  11. Safety of stored data on servers
  12. Uploading a photo of a credit card or passport scan
  13. Use of personal data for commercial purposes
  14. Exposing private messages and emails publicly
  15. Exposing search history publicly
  16. Social profiling by potential employers
  17. An app posting on user’s behalf
  18. Difficulty to export personal data
  19. Difficulty to cancel a subscription
  20. Hidden fees and costs not explicitly mentioned
  21. Importing contact details of friends
  22. Trolling and stalking online
  23. Data breach of login, password, and credit card details
  24. Hacked Gmail, Facebook, Twitter, or Instagram accounts

It’s quite astonishing to see how many concerns our humble interfaces raise, producing doubt, uncertainty, and skepticism in our customers.

They don’t come out of nowhere, though. In fact, conversations about privacy often share a common thread: dreadful previous experiences that users had to learn from — the hard way. Usually it’s not those password input nightmares or frustrating CAPTCHAs; instead, it’s credit card fraud after an online purchase, and never-ending emails from companies trying to lure you in; and unsolicited posts, check-ins, and recommendations graciously posted on user’s behalf. So it shouldn’t be very surprising that for most customers the default behavior and response for pretty much any request of personal data is “Block,” unless the app makes a strong, comprehensible case of why the permission should be granted.

This goes for importing contacts as much as for signing in with a social login: nobody wants to spam their friends with random invitations or have an app polluting their profile with automated check-in messages. On the other hand, anonymous data collection always wins. Whenever the word “anonymous” made its appearance in privacy policies, security updates, or web forms, customers were much less reluctant to share their personal data. They understood that the data is collected for marketing purposes, and wouldn’t be used to target them specifically, so they had no issues with it at all across the board. So if you need to gather some data, but don’t need to target every individual customer, you are likely to cause fewer concerns with your customers.


importing contacts feature on LinkedIn
One of the most dreadful features out there: importing contacts from other social networks. Very often, customers associate this feature with nothing but annoying and irreversible spam. (Large preview)

In our interviews, users often spoke about “being burned in the past,” which is why they tend to be careful when granting permissions for any kind of data or activities online. Some users would have a dedicated credit card for online purchases, heavily protected with 2-factor authorization via their phone; others would have dedicated spam or throwaway email address for new accounts and registration, and yet others would never share very personal information in social networks. However, all these users were in a small minority, and most of them changed their attitude after they had experienced major privacy issues in the past.

We have to design our interfaces to relieve or eliminate these concerns. Obviously, this goes very much against dubious practices for tricking customers into posting, sharing, engaging, and adding value to our platforms, hence exposing their personal data. This might also work against the business goals of the company that is heavily dependent on advertising and maximizing customer fees. However, there is a fine line between techniques used to keep users on the site and exploiting their privacy. We need to eliminate privacy concerns, and there are a few straightforward ways of doing so.

Privacy In Web Forms

While it’s been a good practice to avoid optional input fields and ask only for the information required to complete the form, in the real world web forms are often poisoned with seemingly random questions that appear absolutely irrelevant in the user’s context.

The reason for this isn’t necessarily malicious in intent, but rather technical debt, as the site might be using a site-wide component for all forms, and it simply doesn’t allow for enough flexibility to fine-tune the forms appropriately. For example, when asking the user for their name, we’ve become accustomed to breaking a full name into first name and family name in our forms, sometimes with a middle name in between.

From a technical perspective, it’s much easier to save structured data this way, but when asking for a person’s name in a real-life conversation we hardly ever ask specifically for their first name or last name — instead we ask for their name. In some countries, such as Indonesia, the last name is very uncommon, and in others a middle name is extremely rare. Hence, combining the input into a single “Full name” input field seems most plausible, yet in most web forms out there, it’s rarely the case.

That means that in practice, seemingly random questions have to be asked at times, even though they aren’t really required. On the other hand, marketing teams often need personal information about their customers to be able to capture and present the reach and specifics of the audience to their potential advertisers. Gender, age, preferences, habits, purchasing behavior and everything in between falls under this category. And that’s not the kind of data that users are happy to willingly hand over without a legitimate reason.

When running interviews with users, we’ve identified a few common privacy-related data points that were considered to be of a “too private, too intrusive” nature. Obviously, it heavily depends on the context too. Shipping address is perfectly acceptable at a checkout, but would be out of place in an account sign-up form. Gender would be inappropriate in an anonymous donation form, but would make perfect sense on a dating website.

In general, users tend to raise concerns when asked about the following details (in order of magnitude or severeness):

  • Title
  • Gender
  • Age
  • Birthday
  • Phone number
  • Personal photo
  • Credit card or bank details
  • Signature
  • Passport details
  • Social security number

Admittedly, only a few users would abandon a form just because it’s asking for their title or gender. However, if the questions are framed in an inappropriate way, or many of the questions seem to be irrelevant, all these disturbances start to add up, raising doubt and uncertainty at the point when we, as designers, want to ensure clarity and get all potential disturbances out of the way. To avoid that, we need to explain why we need a user’s data, and provide a way out should the customer want to keep the data private.

Explain Why You Need A User’s Data

With numerous data breaches, scam mails, and phishing websites permanently reminding users of the potential implications of data misuse, they rightfully have doubts and concerns about sharing private information online. We rarely have second thoughts when asked to add a few seemingly harmless radio buttons and input fields to a form, but the result is often not only a decrease in conversion, but a long-lasting mistrust of customers towards the brand and its products.

As a result, you might end up with people submitting random data just to “pass through the gates,” as one interviewer called it. Some people would creatively fight back by providing random answers to “mess up the results.” When asked for a phone number, some would type in the correct number first (mostly because they expect the input to be validating the correct format of the phone number), and then modify a few digits to avoid spam calls. In fact, the more personal data a website is attempting to gather, the more likely the input is to be purposefully incorrect.


explanations about privacy
Just-in-time explanations with the info tooltip in forms. Explaining why you need a user’s data matters. Image source: Claire Barrett. (Large preview)

However, customers rarely have concerns when they fully understand why particular private information is required; the doubts occur when private information is required without an adequate explanation. While it might be obvious to the company why it needs particular details about its users, it might not be obvious to users at all. Instead, it might appear suspicious and confusing — mostly owing to the simple lack of understanding of why it’s actually needed and if it might be misused.

As a rule of thumb, it’s always a good idea to explain exactly why the private data is required. For example, a phone number might be required to contact the customer in case a package can’t be delivered. Their birthday might be required to customize a special gift for a loyal customer. Passport details might be required for identity verification when setting up a new bank account.

All these reasons have to be explicitly stated as a hint next to the input field; for instance, revealed on tap or click behind an info icon, to avoid confusion and misunderstanding. For the same reason, if you’re aware that some questions might feel weird for a particular set of customers, make them optional and indicate they can be skipped if they seem to be not applicable.

It’s also a good idea to reassure the user that you take their privacy seriously, and that their data will be protected and, most importantly, will not be used for any targeted marketing purposes nor shared with third parties. Surprisingly, the latter seemed to be even more important to a large number of users than the former, as they didn’t want their data to “end up in random, inconvenient, places.”

Always Provide A Way Out

We have all been there: the reality is rarely a set of straightforward binary choices, and more often than not, it’s a spectrum of possibilities, without an obvious set of predefined options. Yet isn’t it ironic that our interfaces usually expect a single, unambiguous answer for reasonably ambiguous questions?

When designing the options for title and gender, we tend to think in common patterns, providing a strict set of predictable options, basically deciding how a person should identify themselves. It’s not our place to do so, though. Not surprising, then, that for some users the options felt “patronizing and disrespectful.” A common area where this problem occurs frequently is the framing and wording of questions. Gender-neutral wording is less intrusive and more respectful. Instead of referring to a specific gender, you could keep the tone more general; for instance, asking for the age of a spouse rather than wife or husband.


gender options
The world is rarely binary. Always provide a way out when specifying gender. Check the article on inclusive form design for gender diversity. Also, askingaboutgender.tumblr.com collects good UX practices for collecting and displaying information about gender. (Large preview)

To avoid lock-in, it’s a good strategy to always provide a way out should the customer want to specify input on their own, or not want to share that data. For title and gender it might be as easy as providing an additional input field that would allow customers to specify a custom input. A checkbox with “I’d rather not say” or “I’d like to skip this question” would be a simple way out if customers prefer to avoid the question altogether.

Always Ask For Exactly What You Need, Never More

What question seems to be more personal to you: your age or your birthday? In conversations with users, the former was perceived much less personal than the date of birth, mostly because the former is more broad and general. In reality, although companies rarely need a specific date of birth, the required input contains masks for the day, month, and year.

There are usually three reasons for that. On the one side, marketing teams often want to know the age of the customer to understand the demographics of the service — for them, a specific date of birth isn’t really necessary. On the other side, when a company wants to send out custom gifts to a customer on their birthday, they do need the day and the month — but not necessarily the year.


Carlsberg age prompt
Never ask more than you need. For its age prompt, Carlsberg used to ask only the year of birth, and ask for month and day only if necessary to verify that the customer is over 18 years old. (Large preview)

Finally, depending on local regulations, it might be a legal requirement to verify that a website visitor is over a certain age threshold. In that case, it might be enough to ask the customer if they are over 18 rather than asking them for their date of birth, or ask them only for the year of birth first. If they are definitely younger than 18, they might not be able to access the site. If they are definitely older than 18, they can access the site. The prompts for the month should appear only if the user might be just below or just above 18 (born 18 years ago). Finally, the day input would appear only if it’s absolutely necessary to check if the user is old enough to enter the site.

When designing an input for age or date of birth, consider the specific data points that you need and design the form accordingly. Try to minimize the amount of input required, and (again) explain why for what purpose you need that input.

When Asking For Sensitive Details, Prepare Customers Ahead Of Time

While users can find a way to “pass through the gates” with title, gender, age, birthday, and even phone number input, they will have a very difficult time finding a way out when asked for their photo, signature, credit card, passport details, or social security number. These details are very personal and customers tend to spend a disproportionate amount of time filling in these input fields, slowing down massively as they do so. Often this area would be where the users would spend most of their time, and also where they abandon most frequently.

When asked to type in this kind of data, customers would often linger around the interface, scanning it from top to bottom and right to left or scrolling up and down — almost hoping to detect a reassuring confirmation that their data will be processed securely. Almost nobody would mindlessly load their personal photo or type in their passport details without a brief reassurance phase, both on mobile and on desktop.

There are a few strategies to alleviate the concerns users might have at this point. Because users slow down significantly in their progress, always provide an option to save and finish later, as some users might not have the details to hand. You could ask for their phone number or email to send a reminder a few hours or days later. Additionally, consider reassuring users with a noticeable hint or even pop-up that you take their privacy seriously and that you would never share details with third party.

It might also be a good idea to prepare the customer for the required input ahead of time. You could ask them to prepare their passport and bank account details before they even start filling in the form, just to set the right expectations.

The more sensitive private details are, the less room for amusing remarks there should be. The voice and tone of accompanying copywriting matter a lot, just like the copy of error messages, which should be adaptive and concise, informing the user about a problem and how it could be fixed.

Don’t Expect Accurate Data For Temporary Accounts

You’ve been here before: you might be having a quick bite in a coffee shop, or waiting for your spouse in a shopping mall, or spending a few layover hours at an airport. It probably won’t take you long to discover a free Wi-Fi hotspot and connect to it. Suddenly, a gracious pop-up window makes its glorious appearance, informing you about 15 free minutes of Wi-Fi, along with a versatile repertoire of lengthy text passages, auto-playing video adverts, painfully small buttons, tiny checkboxes, and miniature legal notices. Your gaze goes straight to where it matters most: the sign-up area prompting you to sign in with Facebook, Twitter, Instagram, SMS, or email. Which option would you choose, and why?

Throughout our interviews, we’ve noticed the same behavior over and over again: whenever customers felt that they were in a temporary place or state (that is, they didn’t feel they might be returning any time soon), they were very unlikely to provide accurate personal data. This goes for Wi-Fi in airports as much as in restaurants and shopping malls. Required sign-ups were usually associated with unsolicited marketing emails, mostly annoyingly irrelevant. After all, who’d love to receive notifications from Schiphol Airport if they’ve only flown from it once?


Heathrow and Aeroports de Paris free wifi form
Every time a temporary account requires email, expect a throwaway email to be entered. Such forms just don’t work, so it’s about time to stop designing them. More examples of such interfaces can be found here. (Large preview)

In fact, users were most unlikely to log in with Facebook, Twitter, or Instagram, because they were worried about third-party services posting on their behalf (we’ll cover these issues in a bit more detail later in this series). Many customers just didn’t feel comfortable letting an unknown third party into what they consider to be their “private personal sphere.” Both SMS and email were perfectly acceptable, yet especially when traveling, many customers didn’t know for sure if they’d be charged for text messages or not, and referred email instead. Hence, it’s critical to never enforce a social sign-in and provide a way out with an SMS confirmation or an email sign-up.

With the email option chosen, however, only a few people would actually provide their active personal or business emails when signing up. Some people keep a trash email, used for new accounts, quick confirmations, random newsletters and printing documents in a print shop around the corner. That email is hardly ever checked, and often full of spam, random newsletters, and irrelevant marketing emails. Chances are high that your carefully crafted messages will be enjoying the good company of these messages, usually unopened and unread.

Other people, when prompted to type in their email, provide a random non-existent @gmail.com account, hoping that no verification will be required. If it is required after all, they usually return and provide the least important email account, often a trash email.

What happens if the service tries to ensure the validity of the email by requiring user to retype their email one more time? A good number will try to copy-paste their input into the email verification input field, unless the website blocks copy-paste or the email input is split into two inputs, one for the segment before the @ symbol, and one after it. It shouldn’t be too surprising that not a single customer was particularly thrilled about these options.

Users seem to highly value a very strict separation between things that matter to them and things that don’t matter to them — especially in their email inbox. Being burned with annoying marketing emails in the past, they are more cautious of letting brands into their private sphere. To get their attention, we need to give customers a good reason to sign up with an active email account; for example, to qualify for free shipping, or auto-applied discounts for loyal customers, or an immediate discount for next purchases, or a free coffee for the next visit. One way or another, we need to deserve their trust, which is not granted by default most of the time.

Don’t Store Private Data By Default

When setting up an account, it’s common to see interfaces asking for permission to store personal data for future use. Of course, sometimes the reason for it comes from the objective to nudge customers into easy repurchasing on future visits. Often it’s a helpful feature that allows customers to avoid retyping and save time with the next order. However, not every customer will ever have a second order, and nobody will be amused by an unexpected call from the marketing department about a brand new offering.

Customers have no issues with storing gender and date of birth once they’ve provided it, and seem to be likely to allow phone numbers to be stored, but they are less likely to store credit card details and signature and passport details.


Some customers would even go as far as taking the time to write a dedicated email requesting passport details to be removed after a successful identity verification.

Hence, it’s plausible to never store private data by default, and always ask users for permission, unchecking the checkbox by default. Also, consider storing details temporarily — for a few weeks, for example — and inform the user about this behavior as they are signing up.

In general, the more private the required information is, the more effort should be spent to clearly explain how this information will be processed and secured. While a subtle text hint might be enough when asking for a phone number, passport details might need a larger section, highlighting why they are required along with all the efforts put into protecting user’s privacy.

Users Watch Out For Privacy Traps

The more your interface is trying to get silent consent from customers — be it a subscription to email, use of personal data, or pretty much anything else — the more customers seem to be focused on getting this done, their way. It might seem like a tiny mischievous checkbox (opted-in by default) might be overlooked, yet in practice customers go to extremes hitting that checkbox, sometimes as far as tapping it with a pinky finger on their mobile phones.

With a fundamental mistrust of our interfaces, customers have become accustomed to being cautious online. So they watch out for privacy traps, and have built up their own strategies to deal with malicious and inquisitive web forms. As such, on a daily basis, they resort to temporary email providers, fake names and email addresses, invalid phone numbers, and random postal codes. In that light, being respectful and humble when asking for personal data can be a remarkably refreshing experience, which many customers don’t expect. This also goes for a pattern that has become quite a nuisance recently: the omnipresent cookie settings prompt.

In the next article of the series, we’ll look into these notorious GDPR cookie consent prompts, and how we can design the experience around them better, and with our users’ privacy in mind.

Smashing Editorial
(og, yk, il)

Source: Smashing Magazine, Privacy UX: Common Concerns And Privacy In Web Forms

Going Serverless With Cloudflare Workers

dreamt up by webguru in Uncategorized | Comments Off on Going Serverless With Cloudflare Workers

Going Serverless With Cloudflare Workers

Going Serverless With Cloudflare Workers

Leonardo Losoviz



(This is a sponsored article.) It is a truth universally acknowledged, that a website in pursuit of success must be in want of speed. And so, it goes serverless.

At its core, serverless is a strategy for a website’s architecture, based on deploying static files (the good old HTML, CSS and image files) on cloud-based hosting, and augmenting the website’s capabilities by accessing cloud-based, charge-per-use dynamic functionality. There is nothing mystical or mysterious about serverless: its end result is simply a website or application.

In spite of its name, “serverless” doesn’t mean “without a server”. It simply means “without my own server”. This means that my site is still hosted on some server, but by offloading this responsibility to the cloud services provider, I can devote all my energies to developing my own product (the website) and not have to worry about the infrastructure.

Serverless is very appealing for several reasons:

  • Low-cost
    You only pay for what you use. Hosting static files on the cloud can cost just a few cents a month (or even be free in some cases).
  • Fast
    Static files can be delivered to the user from a Content Delivery Network (CDN) located near the user.
  • Secure
    The cloud provider constantly keeps the underlying platform up-to-date.
  • Easy to scale
    The cloud provider’s business is to scale up the infrastructure on demand.

Serverless is also becoming increasingly popular due to the increasing availability of services offered by cloud providers, simple-yet-powerful template-based static site generators (such as Jekyll, Hugo or Gatsby) and convenient ways to feed data into the process (such as through one of the many git based CMS’s).

The Network Is The Computer: Introducing Cloudflare Workers

Cloudflare, one of the world’s largest cloud network platforms, is well versed in providing the benefits we are after through serverless: for some time now they have made their extensive CDN available to make our sites fast, offered DDoS protection to make our sites secure, and made their 1.1.1.1 DNS service free so we could afford having privacy on the Internet, among many other services.

Their new serverless offering, Cloudflare Workers (or simply “Workers”), runs on the same global cloud network of over 165 data centers that powers those services. Cloudflare Workers is a service that provides a lightweight JavaScript execution environment to augment existing applications or create new ones.

Being stacked on top of Cloudflare’s widespread network makes Cloudflare Workers a big deal. Cloudflare can scale up its infrastructure based on spikes in demand, serving a serverless application from locations on five continents and supporting millions of users, making our applications fast, reliable, and scalable.


Cloudflare data center map
The Cloudflare network is powered by 165 data centers around the world. (Large preview)

On top of that, Cloudflare Workers provides unique features that make it an even more compelling service. Let’s explore these in detail.

Architecture Based On V8 For Fast Access And Low Cost

The Cloudflare engineers went out of their way to architect Workers, as they proudly explain in depth. Whereas almost every provider offering cloud computing has an architecture based on containers and virtual machines, Workers uses “Isolates”, the technology that allows V8 (Google Chrome’s JavaScript engine) to run thousands of processes on a single server in an efficient and secure manner.

Compared to virtual machines, Isolates greatly reduce the overhead required to execute user code, which translates into faster execution and lower use of memory.


Architecture of Isolates
Isolates allow thousands of processes to run efficiently on a single machine (Large preview)

Cloudflare Workers is not the first serverless cloud computing platform in operation: for instance, Amazon has offered AWS Lambda and Lambda@Edge. However, as a consequence of the lower overhead produced by Isolates, Cloudflare claims that when executing a similar task, Workers beats the competition where it matters most: speed and money.

Lower Price

While a Worker offering 50 milliseconds of CPU costs $0.50 per million requests, the equivalent Lambda costs $1.84 per million. Hence, running Workers ends up being around 3x cheaper than Lambda per CPU-cycle.

Faster Access

The Cloudflare team ran tests comparing Workers against AWS Lambda and Lambda@Edge, and came to the conclusion that Workers is 441% faster than a Lambda function and 192% faster than Lambda@Edge.


Speed comparison chart
This chart shows what percentage of requests to Lambda, Lambda@Edge, and Cloudflare Workers were faster than a given number of milliseconds. (Large preview)

The better performance achieved by Cloudflare Workers is confirmed by the third-party site serverless-benchmark.com, which measures the performance of serverless providers and provides continuously updated statistics.


Performance comparison
Statistics for Overhead (the time from request to response without the actual time the function took) and Cold start (the latency it takes a function to respond to the event) for Cloudflare Workers and its competitors. (Large preview)

Coded In JavaScript, Modeled On The Service Workers API

Because it is based on V8, programming for Workers is done in those languages supported by V8: JavaScript and languages that support compilation to WebAssembly, such as Go and Rust. V8’s code is merged into Workers at least once a week, so we can always expect it to support the latest implemented flavor of ECMAScript.

Workers are modeled on the Service Workers available in modern web browsers, and they use the same API whenever possible. This is significant: Because Service Workers are part of the foundation to create a Progressive Web App (PWA), creating Workers is done through an API that developers are already familiar with (or may be in the process of learning) for creating modern web applications.

In addition, relying on the Service Workers API allows developers to boost their productivity since it allows isomorphism of code, i.e. the same code that powers the Service Worker can be used for a Cloudflare Worker. Even though this is not always feasible because of the different contexts (while a Service Worker runs in the browser, the Cloudflare Worker runs in the network), certain use cases could apply to both contexts.

For instance, among the Service Workers recipes described in serviceworke.rs, recipes for API Analytics, Load Balancer, and Dependency Injection can be implemented on both the client side and the network using the same code (or most of it). And even when the functionality makes sense only on either the client-side or the network, it can be partly implemented using chunks of code that are context-agnostic and can be conveniently reused.

Furthermore, using the same API for Service Workers and Cloudflare Workers makes it easy to provide progressive enhancement. An application can execute a Service Worker whenever possible, and fall back on a Cloudflare Worker when the user visits the site for the first time (when the Service Worker is still not installed on the client), or when Service Workers are not supported (for instance, when the browser is old, or it is just Opera mini).

Finally, relying on a unique API simplifies the overall language stack, once again making it easier for the developer to get more work done. For instance, defining a caching policy for the CDN in Varnish is done through the Varnish Configuration Language, which has its own syntax. Cloudflare Workers, though, enables develpers to code the same tasks through, you guessed it, the Service Workers API.

It Leverages The Modern Toolbox

In addition to Workers not requiring developers to learn any new language or API, it follows modern conventions and provides integration with popular technologies, allowing us to use our current toolbox:

Let’s See Some Practical Examples

It’s time to have fun! Let’s play with some Workers based on common use cases to see how we can augment our sites or even create new ones.

Cloudflare makes available a browser-based testing tool, the Cloudflare Workers Playground. This tool is very comprehensive and easy to use: simply copy the Worker script on the left-side panel, execute it against the URL defined on the top-right bar, see the results on the ‘Preview‘ tab and the source code on the ‘Testing‘ tab (from where we can also add custom headers), and execute console.log inside the script to bring the results on the DevTools on the bottom-right. To share (or also store) your script, you can simply copy your browser’s URL at that point in time.


Screenshot of Playground website
The Playground allows us to test-drive our Cloudflare Workers (Large preview)

Starting with the Playground will take you far, but, at some point, you will want to test on the actual Cloudflare network and, even better, deploy your scripts for production. For this, your site must be set up with Cloudflare. If you already are a Cloudflare user, simply sign in, navigate to the ‘Workers’ tab on the dashboard, and you are ready to go.

If you are not a Cloudflare user, you can either sign up, or you can request a workers.dev subdomain, under which you will soon be able to deploy your Workers. The workers.dev site is currently accepting reservations of subdomains, so hurry up and reserve yours before it is taken by someone else!


Screenshot of workers.dev
workers.dev is currently accepting reservations of subdomains (Large preview)

The recipes below have been taken from the Cloudflare Workers Recipe cookbook, from the examples repository in Github, and from the Cloudflare blog. Each example has a link to the script code in the Playground.

Static Site Hosting

The most straightforward use case for Workers is to create a new site, dynamically responding to requests without needing to connect to an origin server at all. So, hello world!

addEventListener('fetch', event => {
  event.respondWith(new Response('<html><body><p>Hello world!</p></body></html>'))
})

See code in Playground

Instead of printing the HTML output in the script, we can also host static HTML files with some hosting service, and fetch these with a simple Worker script. Indeed, the Worker script can retrieve the content of any file available on the Internet: While the domain under which the Worker is executed must be handled by Cloudflare, the origin website from which the script fetches content does not have to. And this works not just for HTML pages, but also for CSS and JS assets, images, and everything else.

The script below, for instance, renders a page that is hosted under DigitalOcean Spaces:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const parsedUrl = new URL(request.url)
  let path = parsedUrl.pathname

  let lastSegment = path.substring(path.lastIndexOf('/'))
  if (lastSegment.indexOf('.') === -1) {
    path += '/index.html'
  }

  return fetch("https://cloudflare-example-space.nyc3.digitaloceanspaces.com" + path)
}

See code in Playground

Building APIs

A prominent use case for Workers is creating APIs. For instance, the script below powers an API service that states if a domain redirects to HTTPS or not:

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})

/**
* Fetch a request and follow redirects
* @param {Request} request
*/
async function handleRequest(request) {
 let headers = new Headers({
   'Content-Type': 'text/html',
   'Access-Control-Allow-Origin': '*'
 })
 const SECURE_RESPONSE = new Response('secure', {status: 200, headers: headers})
 const INSECURE_RESPONSE = new Response('not secure', {status: 200, headers: headers})
 const NO_SUCH_SITE = new Response('website not found', {status: 200, headers: headers})

 let domain = new URL(request.url).searchParams.get('domain')
 if(domain === null) {
   return new Response('Please pass in domain via query string', {status: 404})
 }
 try {
   let resp = await fetch(`http://${domain}`, {headers: {'User-Agent': request.headers.get('User-Agent')}})
   if(resp.redirected == true && resp.url.startsWith('https')) {
     return SECURE_RESPONSE 
   }
   else if(resp.redirected == false && resp.status == 502) {
     return NO_SUCH_SITE
   }
   else {
     return INSECURE_RESPONSE
   }
 }
  catch (e) {
   return new Response(`Something went wrong ${e}`, {status: 404})
 }
}

See code in Playground

Workers can also connect to several origins in parallel and combine all the responses into a single response. For instance, the script below powers an API service that simultaneously retrieves the price for several cryptocurrency coins:

addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request))
})
  
/**
 * Make multiple requests, 
 * aggregate the responses and 
 * send it back as a single response
 */
async function fetchAndApply(request) {
    const init = {
      method: 'GET',
      headers: {'Authorization': 'XXXXXX'}
    }
    const [btcResp, ethResp, ltcResp] = await Promise.all([
      fetch('https://api.coinbase.com/v2/prices/BTC-USD/spot', init),
      fetch('https://api.coinbase.com/v2/prices/ETH-USD/spot', init),
      fetch('https://api.coinbase.com/v2/prices/LTC-USD/spot', init)
    ])
  
    const btc = await btcResp.json()
    const eth = await ethResp.json()
    const ltc = await ltcResp.json()
  
    let combined = {}
    combined['btc'] = btc['data'].amount
    combined['ltc'] = ltc['data'].amount
    combined['eth'] = eth['data'].amount
  
    const responseInit = {
      headers: {'Content-Type': 'application/json'}
    }
    return new Response(JSON.stringify(combined), responseInit)
}

See code in Playground

Making the API highly dynamic by retrieving data from a database is covered too! Workers KV is a global, low-latency, key-value data store. It is optimized for quick and frequent reads, and data should be saved sparingly. Then, it is a sensible approach to input data through the Cloudflare API:

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/storage/kv/namespaces/$NAMESPACE_ID/values/first-key" 
-X PUT 
-H "X-Auth-Email: $CLOUDFLARE_EMAIL" 
-H "X-Auth-Key: $CLOUDFLARE_AUTH_KEY" 
--data 'My first value!'

And then the values can be read from within the Worker script:

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
 const value = await FIRST_KV_NAMESPACE.get("first-key")
 if (value === null)
   return new Response("Value not found", {status: 404})

 return new Response(value)
}

At the time of writing, KV is still in beta and released only to beta testers. If you are interested in testing it out, you can reach out to the Cloudflare team and request access.

Geo-Targeting

Cloudflare detects the origin IP of the incoming request and appends a two-letter country code to header ‘Cf-Ipcountry’. The script below reads this header, obtains the country code, and then redirects to the corresponding site version if it exists:

addEventListener('fetch', event => {
 event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {

   const country = request.headers.get('Cf-Ipcountry').toLowerCase() 
   let url = new URL(request.url)

   const target_url = 'https://' + url.hostname + '/' + country
   const target_url_response = await fetch(target_url)

   if(target_url_response.status === 200) {
       return new Response('', {
         status: 302,
         headers: {
           'Location': target_url
         }
       })     
   } else {
       return fetch(request)
   }
}

See code in Playground

A similar approach can apply to implement load balancing, choosing from among multiple origins to improve speed or reliability.

Enhanced Security

The scripts below add security rules and filters to block unwanted visitors and bots.

Ignore the POST and PUT HTTP requests:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {  
  if (request.method === 'POST' || request.method === 'PUT') {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

See code in Playground

Deny a spider or crawler:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {  
  if (request.headers.get('user-agent').includes('annoying_robot')) {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

See code in Playground

Prevent a specific IP from connecting:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {  
  if (request.headers.get('cf-connecting-ip') === '225.0.0.1') {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

See code in Playground

A/B Testing

We can easily create a Worker to control A/B tests:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  const name = 'experiment-0'
  let group          // 'control' or 'test', set below
  let isNew = false  // is the group newly-assigned?

  // Determine which group this request is in.
  const cookie = request.headers.get('Cookie')
  if (cookie && cookie.includes(`${name}=control`)) {
    group = 'control'
  } else if (cookie && cookie.includes(`${name}=test`)) {
    group = 'test'
  } else {
    // 50/50 Split
    group = Math.random() < 0.5 ? 'control' : 'test'
    isNew = true
  }

  // We'll prefix the request path with the experiment name. This way,
  // the origin server merely has to have two copies of the site under
  // top-level directories named "control" and "test".
  let url = new URL(request.url)
  // Note that `url.pathname` always begins with a `/`, so we don't
  // need to explicitly add one after `${group}`.
  url.pathname = `/${group}${url.pathname}`

  request = new Request(url, request)

  let response = await fetch(request)

  if (isNew) {
    // The experiment was newly-assigned, so add a Set-Cookie header
    // to the response. We need to re-construct the response to make
    // the headers mutable.
    response = new Response(response.body, response)
    response.headers.append('Set-Cookie', `${name}=${group}; path=/`)
  }

  return response
}

See code in Playground

Serving Device-Based Content

The script below delivers different content based on the device being used:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  let uaSuffix = ''

  const ua = request.headers.get('user-agent')
  if (ua.match(/iphone/i) || ua.match(/ipod/i)) {
    uaSuffix = '/mobile'
  } else if (ua.match(/ipad/i)) {
    uaSuffix = '/tablet'
  }

  return fetch(request.url + uaSuffix, request)
}

See code in Playground

Conditional Routing

By passing custom values through headers, we can fetch most-specific content:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  let suffix = ''
  //Assuming that the client is sending a custom header
  const cryptoCurrency = request.headers.get('X-Crypto-Currency')
  if (cryptoCurrency === 'BTC') {
    suffix = '/btc'
  } else if (cryptoCurrency === 'XRP') {
    suffix = '/xrp'
  } else if (cryptoCurrency === 'ETH') {
    suffix = '/eth'
  }

  return fetch(request.url + suffix, request)
}

See code in Playground

Enhanced Performance

Workers makes available a Cache API through which we can save computationally intensive data and have it ready for immediate use from then on:

async function handleRequest(event) {
  let cache = caches.default
  let response = await cache.match(event.request)
      
  if (!response) {
    response = doSuperComputationallyHeavyThing()
    event.waitUntil(cache.put(event.request, response.clone()))
  }
        
  return  response
}

For instance, through the Cache API we can store GraphQL requests whose results have not changed:

async function handleRequest(event) {
  let cache = caches.default
  let response = await cache.match(event.request)
  
  if (!response){
    response = await fetch(event.request)
    if (response.ok) {
      event.waitUntil(cache.put(event.request, response.clone()))
    }
  }
        
  return response
}

Many Others

The list of useful applications goes on and on. Below are links to several additional examples:

Wrapping Up: “The Network Is The Computer”

Because speed matters, websites are going serverless. Cloudflare Workers is a new offering that enables this transition. It blurs the boundaries between the computer and the network, enabling developers to deploy apps globally that run on the fabric of the Internet itself, leveraging Cloudflare’s worldwide network of servers to run our code near where our users are located. It is fast, cheap, and secure, and it scales as much as we need it.

If you want to find out more, check it out or ask the community.

Smashing Editorial
(il)

Source: Smashing Magazine, Going Serverless With Cloudflare Workers

Managing Z-Index In A Component-Based Web Application

dreamt up by webguru in Uncategorized | Comments Off on Managing Z-Index In A Component-Based Web Application

Managing Z-Index In A Component-Based Web Application

Managing Z-Index In A Component-Based Web Application

Pavel Pomerantsev



If you’ve done any complex web UI development, you must have at least once furiously tried driving an element’s z-index up to thousands, only to see that it’s not helping position it on top of some other element, whose z-index is lower or even not defined at all.

Why does that happen? And more importantly, how to avoid such issues?

In this article, I’ll recap what z-index actually is and how you can stop guessing whether it might work in any specific case and start treating it just like any other convenient tool.

The Hierarchy Of Stacking Contexts

If you imagine the webpage as having three dimensions, then z-index is a property that defines the z coordinate of an element (also called its “stacking order”): the larger the value, the closer the element is to the observer. You can also think of it as a property affecting paint order, and this will in fact be more correct since the screen is a two-dimensional grid of pixels. So, the larger the z-index value, the later the element is painted on the page.

There is, however, one major complication. The z-index value space is not flat — it’s hierarchical. An element can create a stacking context which becomes the root for z-index values of its descendants. It would be best to explain the concept of stacking contexts by using an example.

The document body has five div descendants: div1, div2, div3, div1-1, and div2-1. They’re all absolutely positioned and overlap with each other. div1-1 is a child of div1, and div2-1 is a child of div2.

See the Pen stacking-contexts by Pavel Pomerantsev.

Let’s try to understand why we see what we see. There are quite elaborate rules to determine paint order, but here we only need to compare two things:

  • z-index Values
    If an element has a higher z-index, it’s painted later.
  • Source Order
    If z-index values are the same, then the later it’s in the source, the later it’s painted.

So if we don’t take stacking contexts into account, the order should be as follows:

  • div1
  • div2
  • div3
  • div1-1
  • div2-1

Note that div2-1 is in fact overlapped by div3. Why is that happening?

If an element is said to create a stacking context, it creates a basis for its children’s z-index values, so they’re never compared with anything outside the stacking context when determining paint order. To put it another way, when an element creating a stacking context is painted, all its children are painted right after it and before any of its siblings.

Going back to the example, the actual paint order of body’s descendant divs is:

  • div1
  • div2
  • div3
  • div1-1

Notice the absence of div2-1 in the list — it’s a child of div2 which creates a stacking context (because it’s an absolutely positioned element with a z-index other than the default value of auto), so it’s painted after div2, but before div3.

div1 doesn’t create a stacking context, because its implicit z-index value is auto, so div1-1 (its child) is painted after div2 and div3 (since its z-index, 10, is larger than that of div2 and div3).

Don’t worry if you didn’t fully grasp this on first reading. There’s a bunch of online resources that do a great job in explaining these concepts in more detail:

Note: It’s also great to be familiar with general paint order rules (which are actually quite complex).

The main point of this piece, however, is how to deal with z-index when your page is composed of dozens and hundreds of components, each potentially having children with z-index defined.

One of the most popular articles on z-index proposes grouping all z-index values in one place, but comparing those values doesn’t make sense if they don’t belong to the same stacking context (which might not be easy to achieve in a large application).

Here’s an example. Let’s say we have a page with header and main sections. The main section for some reason has to have position: relative and z-index: 1.

We’re using a component architecture here, so CSS for the root component and every child component is defined in dedicated sections. In practice, components would live in separate files, and the markup would be generated using a JavaScript library of your choice, like React, but for demonstration purposes it’s fine to have everything together.

Now, imagine we’re tasked with creating a dropdown menu in the header. It has to be stacked on top of the main section, of course, so we’ll give it a z-index of 10:

Now, a few months later, in order to make something unrelated work better, we apply the translateZ hack to the header.

As you can see, the layout is now broken. An element with z-index: 1 sits on top of an element with z-index: 10, in the absence of any other z-index rules. The reason is that the header now creates a stacking context — it’s an element with a transform property whose value is anything other than none (see full rules) and its own z-index (0 by default) is lower than that of the main section (1).

The solution is straightforward: give the header a z-index value of 2, and it’ll be fixed.

The question is, how are we supposed to come to this solution if we have components within components within components, each having elements with different z-indices? How can we be sure that changing z-index of the header won’t break anything else?

The answer is a convention that eliminates the need for guesswork, and it’s the following: changing z-indices within a component should only affect that component, and nothing else. To put it differently, when dealing with z-index values in a certain CSS file, we should ideally only concern ourselves with other values in that same file.

Achieving it is easy. We should simply make sure that the root of every component creates a stacking context. The easiest way to do it is to give it position and z-index values other than the default ones (which are static and auto, respectively).

Here’s one of the ways to structure the application. It uses more elements than the previous one, but computation associated with extra DOM elements is cheap whereas developer’s time (a lot of which can sometimes be spent on debugging stacking issues) is definitely not.

  • header__container and main__container both have position: relative and z-index: 0;
  • header__overlay now has z-index: 1 (we don’t need a large value since it’s only going to compete for stacking order with other elements within the header);
  • root__header now has z-index: 2, whereas root__main keeps its z-index: 1, and this is what makes the two siblings stack correctly.

(Note also that both have position: relative since z-index doesn’t apply to statically positioned elements.)

If we look at the header code now, we’ll notice that we can remove the z-index property from both the container and the overlay altogether because the overlay is the only positioned element there. Likewise, the z-index is not required on the main container. This is the biggest benefit of the proposed approach: when looking at z-indices, it’s only the component itself that matters, not its context.

Such an architecture is not without its drawbacks. It makes the application more predictable at the expense of some flexibility. For example, you won’t be able to create such overlays inside both the header and the main section:

In my experience, however, this is rarely a problem. You could make the overlay in the main section go down instead of up, in order for it to not intersect with the header. Or, if you really needed it to go up, you could inject the overlay HTML at the end of the body and give it a large z-index (“large” being whatever’s larger than those of other sections at the top level). In any case, if you’re not in a competition to build the most complicated layout, you should be fine.

To recap:

  • Isolate components in terms of z-index values of elements by making the root of each component a stacking context;
  • You don’t have to do it if no element within a component needs a z-index value other than auto;
  • Within a component’s CSS file, maintain z-index values any way you like. It might be consecutive values, or you could give them a step of 10, or you can use variables — it all depends on your project’s conventions and the size of the component (although making components smaller is never a bad thing). Preferably, only assign z-index to sibling elements. Otherwise, you may inadvertently introduce more stacking contexts within a component, and you’re faced with the same issue again, luckily on a smaller scale;
  • Debugging becomes easy. Find the first ancestor component of the two elements that are not stacked correctly, and change z-indices within that component as necessary.

This approach will hopefully bring back some sanity to your development process.

Smashing Editorial
(dm, ra, il)

Source: Smashing Magazine, Managing Z-Index In A Component-Based Web Application

Design System: What It Is And How To Create One Using Indigo.Design

dreamt up by webguru in Uncategorized | Comments Off on Design System: What It Is And How To Create One Using Indigo.Design

Design System: What It Is And How To Create One Using Indigo.Design

Design System: What It Is And How To Create One Using Indigo.Design

Nick Babich



(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when designing them. To deliver well-designed products to the market, many organizations have started taking a more systematic approach to design, experimenting with style guides and pattern libraries in order to create design systems.

While product teams might face various problems in creating and incorporating a design system into their design process, one of the most common problems is integrating the different tools a team uses. Even if a team has a pixel-perfect visual design with properly handled components, they could face trouble in the design handoff and coding, all because their tools do not work properly with each other.

Indigo.Design attempts to solve this problem by introducing a unified platform for visual design, UX prototyping, code generation and app development. Using this platform increases the chances that you will create a design system that takes root and becomes an essential part of the organization. In this article, we’ll focus on just one aspect of this tool: using a design system in a visual design. But before that, it’s important to define what a design system is.

What Is A Design System?

A design system is a collection of elements that can be combined and reused to build products. This definition might give the wrong impression that it’s a single design deliverable, such as a Sketch library with UI components or a style guide. In fact, a design system is much more than that. Think of it as a process and a set of deliverables that create a shared language that everybody on the team will use when creating a product.

A design system is about communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is to create both a single source of truth that can be referred to during product design and an effective shared language that all team members can use when working on a product.

What Problems Does A Design System Solve For Team Members?

Perhaps the most crucial thing that a design system brings to a product team is a different approach — members start approaching a design with a system in mind. Here are a few everyday tasks that a design system can help a team member with:

  • Quickly find and use the right component, pattern or style option (color, typeface, icon, etc.);
  • Reuse a component or pattern (either in the same product or in another product);
  • Know how to use a component or pattern properly (product creators will now have this guidance when creating products);
  • Reassure yourself that the components you are using are up to date.

What Can Motivate A Team To Think About A Design System?

There are a few powerful motivators for a team to think about a design system:

  • Design debt.
    As products and teams age, they accumulate design and development debt. Non-reusable conventions, inconsistent styles and legacy code are the most common sources of design and technical debt. Debt prevents a team from moving quickly. A design system helps an organization to reduce its debt.
  • Collaboration and communication problems.
    In large companies, a few different teams will usually work on a single project. Even with a team that communicates regularly, it’s quite common for their work to overlap (such as by creating similar components or UX patterns). A design system can build bridges between teams and make it easier to reuse work.
  • Repetitive work.
    A design system frees up time from repetitive work so that the team can focus on solving more interesting problems. The fact that team member won’t need to worry about which icon or button to choose in a particular situation not only saves valuable time, but also helps them to focus on the big picture: thinking more about how the user will use the product.
  • Consistency within a product family.
    Large companies need to design for multiple platforms and have a consistent experience across all platforms (both in behavior and interaction). Considering that an individual team is responsible for creating a design for a particular platform, this isn’t a simple task. A design system makes it much easier to design a consistent experience across all platforms.

The Key Qualities Of A Well-Functioning Design System

Regardless of the technologies and tools behind it, an effective design system has the following characteristics:

  • It should be adopted by the team.
    The system should fit the culture of the team. It should become a natural part of the design process and evolve gradually with the team’s products.
  • It should be balanced.
    The system should give team members enough freedom to contribute yet stay within parameters.
  • It should be consistent.
    The different parts of the system work well together.
  • It should be well-documented.
    The quality of documentation has a direct impact on the system’s adoption. If something is not documented, it doesn’t exist. That’s why the documentation should always be up to date.
  • It should be robust.
    Whatever the product or platform to which a design system is applied, the final product should have minimal flaws.
  • It should be highly reusable.
    All components of the system should be able to be reused in many contexts.
  • Last but not least, it should be cost-effective.
    An effective system can make the design process more cost-effective.

How Does Indigo.Design Simplify The Process Of Building A Design System?

Starting a design system can feel daunting. It’s evident that a great design system cannot be built overnight; there are too many things to consider. Even with all its benefits, it’s hard to get buy-in from the teams involved in design and development, mainly because the system will influence the way designers and developers work. Let’s see how Indigo.Design can improve this process.

The key thing that differentiates Indigo.Design from any other tool is that it’s a unified platform for visual design, UX prototyping, code generation and app development. Usually, design systems are created by product companies for their own products.

As a result of the significant number of user requests and expertise in building UI controls, the Indigo team has identified the component and pattern needs of a great number of clients from various industries. Thanks to this knowledge, Indigo.Design’s system goes beyond regular design systems that are created for specific product needs; rather, it is a ready-to-use design system that can be easily adjusted to the needs of a particular team. Users can use Indigo.Design’s Sketch UI kit as a starting point to build their own system using the premade components and patterns.

Indigo.Design consists of three parts: components, patterns and styling. All three parts are integrated as Sketch libraries and are perfectly synced. They will appear in the ‘Symbols’ section in Sketch.

Components

Components are the building blocks of user interfaces. Think of components as LEGO blocks that you can use to create a product. Avatars, cards and dialogs are just a few examples of components.

Components range in complexity, from simple components such as a “Submit” button to more complex components such as interactive cards. Usually, the more complex a component, the fewer the scenarios to which it can be applied.

Component-based design and development bring a lot of benefits to the design process, reducing technical overhead by making design and code reusable.

Because components are designed and built in code, for each component, it’s vital to describe both:

  • visual language (visual appearance),
  • functional behavior (code).

Indigo.Design provides a flexible way of working with components:

  • The design library has over 50 components:

A robust array of components are available in Indigo.Design
A robust array of components are available in Indigo.Design. (Large preview)
  • Indigo allows you to modify everything about a component in a structure way. Individual properties, such as size, styling, icons, fonts and events, can be modified in the Overrides section of a component. For example, for avatars, we can select a different shape of the object, changing it from a circle to a square. With overrides, it’s possible to create unlimited design combinations to drive your team’s productivity.
  • The components of a design system are interdependent. When we introduce a change in one place, the change will be inherited throughout the system.
  • Indigo makes it easier to translate design into code. All components map to the Ignite UI for Angular components. Data from the DataProperty field will be passed through to the code generator.

Below, you can see a layout with an input component. Sketch’s Overrides section contains the properties of the selected component. Modifying each property in a structured way is easy; basically, everything from styling options to events can be easily adjusted.

Each component can have a different list of Overrides based on its capabilities. For example, for the input field, we notice a DataProperty field, which can be translated directly to a code generator.


Use Overrides to modify the properties of a component
Use Overrides to modify the properties of a component. (Large preview)

Patterns

Many designers think that patterns and components are the same things. They are not. The idea of a design pattern was introduced by architect Christopher Alexander. In his book A Pattern Language, Alexander gives the following description:

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.”

Similarly to architecture, we use patterns in interface design to solve common problems. For example, many apps have contact lists. It’s possible to create a contact list using components, by pairing avatars and text sections.


Create a contact list using Indigo.Design’s avatar and text component sections
Create a contact list using Indigo.Design’s avatar and text component sections. (Large preview)

But there is a much easier approach — use a pattern called ‘List’.


Use Indigo.Patterns’ list for people
Use Indigo.Patterns’ list for people. (Large preview)

Patterns empower designers, allow people to use their previous experience when interacting with a product. Because many design patterns are familiar to users, they will enable a design to be understood intuitively.

Components and patterns form the language of a product’s interface. But a design system should contain not only patterns, but also techniques and practices for using and iterating on those patterns. For many companies, a pattern library typically lives in a wiki, which means it’s difficult to keep up to date. What makes things worse is that patterns are also shaped by the conventions of platforms (for example, iOS and Android).

Indigo.Design solves these common problems by providing easily customizable UX patterns for a brand’s needs.


Adding elevation for the article details pattern
Adding elevation for the article details pattern (Large preview)

With the last release of Indigo.Design, it’s become much easier to customize styling options: You can apply your styling options for the entire design all at once using the Theme plugin.


Indigo.Design’s Theme plugin allows you to apply style settings for all elements in a design
Indigo.Design’s Theme plugin allows you to apply style settings for all elements in a design. (Large preview)

Styling

A style is something we use to create a certain kind of aesthetic and to strengthen the emotional connection between a product and its users. Indigo.Design makes it really easy to create an elegant design that matches your brand.

Indigo-Styling.sketch is a representation of the theming engine. It is separated into two parts, represented as different pages in the library:

  • Icons are a collection of over a hundred Material icons that you can easily extend.
  • Colors are a rich collection of primary, secondary and special colors, as well as shades of gray and levels of opacity.


(Large preview)

The styling library allows you to do custom branding (changing colors, fonts, etc.), and it is also inherited by the design. With just a few clicks, you can create and reuse a theme.


Change the text color of a form’s active elements to the product’s primary color using Overrides
Change the text color of a form’s active elements to the product’s primary color using Overrides. (Large preview)


(Large preview)

Indigo.Design’s Theme functionality lets you take care of most of your styles in a systematic way.

Conclusion

Design systems have changed the way we design and build applications. They are quickly becoming a cornerstone of an organization’s digital product strategy. And it’s extremely important to select tools that allow you to set a solid cornerstone for your product’s design process. Indigo.Design offers a ready-to-use design system that can be adapted to your individual needs.

Smashing Editorial
(ms, al, il)

Source: Smashing Magazine, Design System: What It Is And How To Create One Using Indigo.Design

Collective #504

dreamt up by webguru in Uncategorized | Comments Off on Collective #504










C504_talks

codetalks.tv

Codetalks.tv puts together the best dev talks in a categorized video platform, made by developers for developers.

Check it out












Collective #504 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #504

How To Use Spaces In Web Design With Gestalt Principles

dreamt up by webguru in Uncategorized | Comments Off on How To Use Spaces In Web Design With Gestalt Principles

How To Use Spaces In Web Design With Gestalt Principles

How To Use Spaces In Web Design With Gestalt Principles

Ayesha Ambreen



Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences. Whatever design we come across, our brains are hardwired to transform that piece into simpler components made up of basic shapes and forms that are at play with the spaces. Our minds flood with memories and — thanks to our experiences — we recognize the patterns easily.

Space — both positive and negative — plays a pivotal role in unifying the design elements. As a result, we see a uniform pattern (or not). When the elements are arranged in an orderly manner, the intelligent use of spaces draws our eye to the most noticeable space — be it positive or negative.

The positive space poses as the flesh or the meat of the design; it’s the part where you see the shapes, colors, patterns and so on. The negative space, on the other hand, is the background or the hyped white space (most of the times).

The popular artwork by Vincent Van Gogh features an interesting case of negative versus positive space
“The Starry Night” by Vincent van Gogh

As much as the positive space seems to dominate the negative counterpart, both are used in equilibrium to tell a harmonious, coherent, and a seamlessly complete story.

In balanced compositions, the positive parts and negative space of the design work together and complement each other to form a seamless, aesthetically pleasing whole. Unbalanced compositions, on the contrary, can cause discomfort to the audience and convey an incomplete, rather distorted story.

But what kind of story do spaces tell in web design?

In the midst of the spaces, the success and failure of web design is determined more by the utility and the usability. Just consider that if you have poor design skills, the overall efficacy and the presentation of the web design will be disturbed. Content is king, but from an alternative point of view, the content will take its toll on your website if the spaces are not used appropriately.

If you think your developing skills rock but your design skills could need some more improvement, you’ve just hit the jackpot. In this article, we’re going to cover:

  • Positive versus negative space relationship, importance and implementation;
  • The connection between spaces and cognitive perception;
  • The Gestalt principles and their implication in web design.

We’re also going to discuss some real-world web design examples with each Gestalt principle and creative use of spaces.

Without further ado, let’s begin.

Positive Versus Negative Space: Relationship, Importance And Implementation

Spaces comprise of two main dimensions: positive and negative. The positive is the element and the negative is the no element. As mentioned before, the positive is object, negative is the negligible space behind it. Where one is the focus, other serves as the background. Where the former moves and motivates, the latter remains stationary and obscure. Where one is the moon, the other is the dark sky surrounding it.

In web design, the spaces interact with each other to maintain the idea of holistic composition. Visual hierarchy is only created when both the spaces are differentiated with contrast and yet tend to the bigger picture (think of yin and yang).


The popular Chinese symbol Yin and Yang
“Yin and yang”, a concept of dualism in ancient Chinese philosophy. (Large preview)

We differentiate between the positive and the negative space at the meeting point. The negative occurs mainly as the white space that complements the positive to make it pop out.

It might seem that the positive space takes the lead, the negative space is equally important for a myriad of benefits. Some of these benefits are:

  • It creates an easy-to-follow visual hierarchy;
  • Sets the focus of attention as well as reduces distraction;
  • Helps establish the scale and lets the focus appear bigger;
  • It improves page scan-ability;
  • Makes the flow on the page appear natural;
  • It clarifies the relationship between the visual elements without the need for additional aids;
  • It helps de-clutter the page;
  • Enhances the style and look of the webpage.

Negative space in design isn’t that negative if you ask me. However, both space types perform great when used in a balanced ratio. Unfortunately, chaos strikes only when either one dominates the other and gives an ‘overcrowded’ or a ‘lacking’ impression. In both cases, the audience is unable to process such complex information, and hence, the motive of using space creatively for web design falls apart.

Here’s a web template with misplaced content or ‘chaos’ space:


Here is what happens when space is not considered
Unconsidered ‘chaotic’ space (Large preview)

We translated the above website template into black and white to show space discrepancies
Space discrepancies shown in black and white (Large preview)

Here we have fixed space to show how space can spark clarity and uniformity when used in proportion
Fixed space to show how space can spark clarity and uniformity when used in proportion (Large preview)

The effective use of space in web design
The effective use of space in web design (Large preview)

As fascinating as the concept and arrangement of space occurs, doubt begins to fog the area.

  • Is the positive space surrounded by the negative one or is the negative space eaten up by the positive one?
  • How is the proportion of each space type determined?
  • Which one should validate as the focal object?
  • Is it mandatory to highlight one and eclipse the other to communicate your intended perception to the audience?
  • How would I achieve ‘design nirvana’ with the communion of positive and negative spaces?

Questions like these can only be answered with a clear understanding of the basics. And as per the golden rule of thumb: simplicity is the best policy (we made that up because it fits!).

We mentioned in the beginning that web design is all about creating a simple user interface that helps you and your audience kill more than two birds with one stone, or in literal terms, helps increase the visual desirability of the website design as well as making it effective and easier to use — yes, with an incredible power over the use of spaces.

The Connection Between Spaces And Cognitive Perception

Since our minds are always playing the detective for finding hidden clues and missing links between the spaces, it compares present visuals with the ones experienced before as a part of the cognitive process. In order to become an efficient web designer, you must first understand how the brain pays attention to its surroundings. It may help you pin the particular use of visual elements and use them to influence the viewer’s perception.

“Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations? How does their mind react to the message your piece is sharing?”

Laura Busche, Brand Content Strategist at Autodesk

You must now have a clear idea of how visual design and psychology are linked and have the power to influence each other. In other words, the main idea of developing a simple user-centric interface and using space for its design is by considering the Gestalt principles. These can help you understand and control the visual-psychological connection.

Recommended reading: Improve Your Designs With The Principles Of Similarity And Proximity

Gestalt Principles In Web Design

Gestalt is German for ‘forms’. It is more of a concept than a word, which states that:

“The whole is other than the sum of the parts.”

— Kurt Koffka

A collection of individual units appears as a group to us when they’re unified in some way. We see the elements as a group despite their individuality. This concept or theory applies fundamentally to all the design mediums: We don’t see text, colors, and shapes as separate elements, but instead a whole webpage as a collective entity. The same applies to a forest: we don’t only see a bunch of trees, just the same way we don’t see water drops when looking at an ocean.

The Gestalt principles describe how the human mind perceives visual components when certain terms and conditions are applied. It helps the brain create imagery of the visual. Hence, the Gestalt principles are based on six main categories:

  1. Figure And Ground
  2. Proximity
  3. Symmetry And Order
  4. Similarity
  5. Closure
  6. Continuity

Figure And Ground

The ‘figure’ is the object that is intuitively as well as visibly separated from the ground.


Negative space vs. positive space depiction through grail cup
Grail Cup (Large preview)

The most classic example that exists is that of the grail cup — the vase between two mirroring face silhouettes. When you first come across this image, your eyes are drawn to the most focally visual object that comes into your notice immediately, which might be the faces opposing each other or the vase. While your mind is adjusting your focus, the ground or the vase is blurred out and at that moment, your mind intuitively crops out the negative or the ground in the image.

After a while, you get to notice the vase in the background and realize it was there in the first place. As ambiguous as the Figure and Ground principle seems, designers usually create visually appealing surreal and illusionary art and web designs.


Image depicting the figure-ground relationship
Figure-ground relationship (Large preview)

Sometimes, the relationship between figure and ground is stable, which makes both distinguishable from one another. This relationship is sometimes unstable, meaning that the figure and ground are indistinguishable from each other. Due to the ambiguousness of this relationship, the viewers confront perceptual confusion.

To give you a clear idea of how the figure-ground relationship influences web design, let’s discuss a few examples in detail. Each of these examples focus on three main areas of the figure-ground relationship: You can add explicit visual cues by using contrast, boxes, and shadows for your web design. These techniques are used to distinguish the color, size, and level of detail, to separate the content, and to add depth to the respective object of focus.

In the first example below, Trellis uses a ‘hero image’ (images with clear CTAs) with a figure-ground relationship that clearly indicates the level of detail, color, and size.


Trellis website features a good example of figure-ground relationship
Trellis (Large preview) (Image source)

The text is the figure here in a large cursive font in the center of the page, making it stand out as compared to the image in the background. The white text over the contrasting grayscale image draws the focus of attention, which makes the text visible over it. From another perspective, the background is blurred so that the text pops out as the figure. All of these aspects show that the text here is prioritized as the figure or the positive space, while the blurred image is used as background or the negative space, hence strongly implying the concept of figure and ground.

Next comes the content in boxes. Ocean Health Index makes a smart use of boxed content to separate the figure from the background. This is what you see when you come across their website:


The Ocean Health Index website shows how both figure and ground can be used in web design
Ocean Health Index (Large preview) (Image source)

Which part of it jumps at you when you first view this web page? If you ask me, it’s the main text in white in the upper right-hand side and the two boxes with contrasting color and text. The bold white text on the top is obviously the figure. (Notice how it’s placed over the darker image to stand out.) The boxes down below are also part of the figure, due to the contrast they offer to the ground image. The other aspect of this figure is the second contrast that is placed inside the boxes in the form of contrastive-colored text.

The background uses subtle shades that help the figures appear sharply, showing a pattern of detail here. The boxes are also overlapping the background image, bringing them in clear view over the image.

Some websites also exhibit the figure-ground relationship by adding drop shadows to the figure, in order to give a feeling that the figure is placed over the background. Here’s a screenshot from Seriously Unsweetened:


The Seriously Unsweetened’s website uses figure-ground balanced on their website
Seriously Unsweetened (Large preview) (Image source)

Seriously Unsweetened’s landing page uses more than one technique to maintain that figure-ground relationship in a balanced manner. There are bright colors and shadows. The ground remains white, making it easier for the figure to appear accurately above the ground. In the positive space, the objects in the figure are presented under an illusion as of being ‘on the top’ of the background. The shadow game is played inside the primary figure, making us notice that there is another figure-ground relationship within the main figure. A clever one!

Proximity

Proximity refers to the closeness of elements in a page. Different elements in webpages can be grouped together to create a bigger association. Apart from being similar, the closeness of these elements with each other than other page elements will automatically be paired in the viewer’s mind.


The image depicts proximity in graphic design
Proximity in design (Large preview)

From images to texts and navigation bars to web forms, the Proximity principle applies heavily to web design. When you group similar content together, it creates a seamless relationship between the elements and delivers a better visual experience to the viewer.

Here is an example of proximity as displayed in the navigation of the Mashable website:


Mashable website features proximity principle
Mashable (Large preview) (Image source)

In the snapshot above, you can clearly notice how the elements of the same category are placed together to show the relation with the main menu type. The users’ eyes are automatically drawn to the subtypes under the main heading — also thanks to the use of colors and text size. You can see that the items that are unrelated are set apart with the help of a line, which serves as the users’ guide in relating and separating the items as per the principle of proximity.

Besides delineating the navigation bar, the grid-based content also complies with the golden rule of Proximity. Amazon’s product listing is the best example:


Amazon product pages also make use of proximity principle
Amazon Products (Large preview) (Image source)

Proximity complies with similarity, which is yet to be discussed. As you can see, similar products in the positive space are grouped and separated using narrow white space. This instructs the user to sort their preferred item from the list of similar products. Moreover, the principle of closure also comes into action among the list of similar items.

Now, we’ll take a closer look at the Basecamp web form which displays yet another ideal case for proximity in web design:


Interestingly, Basecamp web form also uses proximity to segment form details
Basecamp Web Form (Large preview) (Image source)

You can notice how the form is divided into two main segments: personal details and ID generation. The first section is implied as the most important field, followed by a lesser important requirement. The headings for both the sections vary as shown by the difference in color and font size. In this web form, proximity is an indicator that places and prioritizes grouping of information from highest to lowest importance.

Symmetry and Ordery

Symmetry refers to the exact reflection or the mirror image of the two opposing planes. It can be regarded as the balance that divides an object into two equal halves. Real-world examples of symmetry include geometrical images like equilateral triangles, circles, and squares and so on.


Here is a clear distinction between symmetric and asymmetric design
Symmetry versus asymmetry (Large preview)

The human mind desires to find the ‘balance’ in human faces, which it finds aesthetically pleasing. The mind also tends to find symmetry in other objects, such as images because symmetry creates harmony and allows the viewers to be at comfort while viewing the image.

Below is a great example of symmetry in web design as exhibited by HvD Fonts:


A good example of symmetry in Web design is HvD Fonts website
HvD Fonts (Large preview) (Image source)

Not only does this webpage show a typical figure-ground relationship, but also displays great symmetry. The page is dissected into four equal halves with fonts of similar size and color. The background in each of the four sections runs along the same theme with a grayscale effect. You can also notice that the negative space isn’t necessarily white; it’s the image in the background.

The idea of symmetry gives rise to another notion: asymmetry can be confusing and must be used with great care when used in web design. Many websites use asymmetry as the main balancing element for spacing, where the unconventional positive space is balanced with a neutral background and vice versa. And as per the concept of asymmetry, Xplode Marketing prompts asymmetry with unique aesthetics pleasing the eyes.


Xplode Marketing website prompts asymmetry with creative placement
Xplode Marketing (Large preview) (Image source)

This webpage immediately grabs the eye using optical illusions as well as asymmetry. The positive space objects are placed in an unusual pattern over the negative space that creates the appeal. The color is the main indicator of harmony between both the spaces and develops a natural connection for the viewers to notice. There is also a strong balance of left-hand graphics with the strong and dominant wings on the right. What do you think?

Similarity

The reason that proximity works closely with the principle of similarity is the quality of shared attributes among the similarly-grouped objects. Whether it be color, shape, posture, size, shape, orientation or any other property, connectedness will prevail when one or more of these are shared in all the objects displayed in proximity.


The image depicts how similar elements group together
Similarity in Design (Large preview)

Even if the positive space elements do not look visibly connected, these will stand apart from the negative one due to the principle of similarity.

Just look at these UrbanDecay palettes list for a moment:


The Urban Decay products are a classic example of similarity in design
Urban Decay (Large preview) (Image source)

The positive spaces aka the figures are different from each other but do share some similarity in various aspects, such as their position, color, product layout and mode of presentation. The only dissimilar object is the ad for the eye shadow primer that stands out uniquely in the line of the similar-product category. This is obviously a marketing tactic that is intended to draw attention without hurting the overall symmetry and beauty of the page. Another point to consider here is that similarity in size sets the other image apart from the similar product category.

Other than just product display, the positive space can be employed with the similarity in conjunction with the negative space.

Let’s take a look at the influenster landing page:


Influenster website applies the principle of similarity to achieve clarity in design.
Influenster’s front page(Large preview) (Image source)

The similarity in the above example shows clearly aligned boxes. Though the products in each positive space are different, the perception of similarity is conveyed by the consistent text fields in the overall page. The genre, layout, and the theme all are similar, hence delivering a seamless effect to the vision.

Closure

Did you ever come across an image that seems close but is open? That is because of the principle of closure. Our brains tend to ‘close’ the gaps in the incomplete objects and use our visual perception to complete the figure, seeing it as a whole.


A perfect example of closure where four circles come together to form a square
Closure in design (Large preview)

The positive and negative spaces close in to form a whole. The best example is that of the hidden shapes and forms in the negative space in and outside the design, which demands an intelligent assessment of message within the design. Using both the spaces creatively in the closure can give rise to an interesting yet simplified design.

Take a look at the screenshot from Magu Kambucha below:


Figure-Ground relationship and closure principles work hand-in-hand in Magu Kambucha website
Magu Kambucha (Large preview) (Image source)

In this example, you can see that closure is kept intact with the principle of the figure-ground relationship. The bottles and the bold text behind are obviously the figure, where the background is solid soft pink. Where’s the closure? See the text behind the bottles? You can’t see it completely, but still know it’s ‘Kambucha’. Except for the first ‘K’ and the last ‘A’, other letters are half hidden, which are intuitively completed and the whole form begins to take shape and consequently, the meaning. This, my friend, is one good example of closure we have here!

Take a look at the screenshot from Cult below:


The title of the website follows the closure principle to add dramatic effect to the animation in the website header
CULT Website (Large preview) (Image source)

Even though the text is not spelled out quite clearly, our minds can easily read the word CULT. The arrangement and alignment of the text made it easy to decipher, even when the words are incomplete.

Continuity

Finally, as per the general Gestalt principles, continuity follows the pattern by leading the eyes to follow a consistent path and establishing a linear pattern from object to object. It can best be understood by the example of a positive space line with a curved over the negative space. The colors of both lines indicate that the lines bent by each other, but the pattern of continuity suggests otherwise.


A depiction of continuous line
Continuity in design (Large preview)

In the image above, the viewers are more inclined to see a straight line despite the color degradation. This leads us to believe that the principle of Continuity guides the perception better than the power of color. This concept flows smoothly through both kinds of spaces. When we insert a subject in the negative space, our eyes tend to draw the line of distinction between the positive space and the negative one.

The imaginary line of continuity is what we tend to introduce in the design to guide our perception when differentiating between the positive and the negative space.

Let’s take our cue from the Crypton Trading website down below:


The pattern on Crypto Trading website exemplifies continuation in design
Crypton Trading (Large preview) (Image source)

See the perfect continuation of design in the right half of the page? Regardless of the light and dark hue in the background, the pattern is pretty much obvious on the page. And when you scroll down, you will see how the pattern as well the color change in a continuous and seamless motion. The shift in tones is negligible here and all we see is a continued pattern of lines and dots.

Another good example is the OscilloScope website:


The OscilloScope website also features the law of continuity through 360-degree view of their studio
OscilloScope Website (Large preview) (Image source)

The website uses the law of Continuity to take web visitors to a 360-degree view of the studio where they can navigate their way to the desired section.


The official website of the film ‘Cargo’ also uses the law of continuity to navigate users
Cargo the movie (Large preview) (Image source)

The film Cargo has a landing page that also uses the law of continuity: it get its text float across the website in a linear motion using the scroll-only navigation. Since the half-visible logo was shown vertically, the viewer has to scroll down to get a full view of it. As the page is scrolled down, the static logo starts floating along with the chunks of text running parallel to it. The navigation leads the user through different levels of experience without interfering the darkness lurking below.

Since our eyes usually follow the smoothest path, graphic designers can use such examples to make them follow the desired path and position the elements along a line.

Summing It Up

In this article, we covered the Gestalt principles in relation to positive and negative spaces in websites. We also made sure we include some real-life examples to give you a clear idea of how you can employ simple yet effective techniques to influence your audience’s perception. The key here is to use these principles to create a web design that appears more than the sum of its parts.

We humans think in terms of our perception — mainly based on visuals. According to the Gestalt principles in relation to positive and negative spaces, we tend to see the bigger picture rather than individual elements at first glance.

Positive and negative spaces help us differentiate, help us recall our experiences, and recognize the patterns. With the help of the Gestalt principles, we are better able to visualize how well we can use spaces in web design to create appealing pieces. Since spaces can appear as a tangled affair for any designer, the best way is to keep intact your Gestalt principles. This is the only way you can truly realize the importance, usage, and effectiveness of spaces in your designs and effortlessly become an effective contributor in the web design domain.

Want to add something else? Don’t forget to share your ideas. We’d love to receive the feedback!

Further Reading

Here are a few design sources to help you understand the Gestalt principles:

Don’t forget to check out the related recommended tutorials:

Smashing Editorial
(il)

Source: Smashing Magazine, How To Use Spaces In Web Design With Gestalt Principles

Blooming Colors And April Adventures (2019 Wallpapers Edition)

dreamt up by webguru in Uncategorized | Comments Off on Blooming Colors And April Adventures (2019 Wallpapers Edition)

Blooming Colors And April Adventures (2019 Wallpapers Edition)

Blooming Colors And April Adventures (2019 Wallpapers Edition)

Cosima Mielke



Starting off the new month with an inspiration boost, that’s the idea behind our monthly wallpapers series which has been going on for more than nine years already. What makes it special: the wallpapers are created by the community for the community, and everyone who has an idea for a wallpaper design is welcome to submit it — no matter if they are experienced designers or aspiring artists.

For this April edition, people from across the globe once again took on the creative challenge to cater for some variety on your screens. The result: a colorful collection of unique and inspiring wallpapers dedicated to the big and small joys of April. All wallpapers come in versions with and without a calendar and can be downloaded for free. Thank you to everyone who participated!

As a bonus goodie, you’ll also find a little April best-of at the end of this post. Please note that these wallpapers come from our archives, and, thus, are only available without a calendar. Enjoy!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Further Reading on SmashingMag:

Dreaming

“The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by Gal Shir from Israel.

Dreaming

Inspiring Blossom

“‘Sweet spring is your time is my time is our time for springtime is lovetime and viva sweet love’, wrote E. E. Cummings. And we have a question for you. Is there anything more refreshing, reviving, and recharging than nature in blossom? Don’t wait. Go outside and enjoy this lovely flourishing season. Let it inspire us all to rise up, hold our heads high, and show the world what we are made of. It’s time to bloom!” — Designed by PopArt Studio from Serbia.

Inspiring Blossom

April Showers

Designed by Ricardo Gimenes from Sweden.

April Showers

Gentle Blooming

“After so many months of grey winter weather, I can’t wait to feel the warmth of sun rays on my skin, to see and smell the flavor of blooming flowers and trees… Thinking about all this inspired me to create these blooming flowers in gentle warm colors.” — Designed by Yuliia Bahniuk from Ukraine.

Gentle Blooming

Spring Serenity

“My inspiration was the arrival of spring that transmits a sense of calmness and happiness through its beautiful colors.” — Designed by Margarida Granchinho from Portugal.

Spring Serenity

Egg Hunt In Wonderland

“April is Easter time and I wanted to remind us that there’s a child inside all of us. My illustration is based on the story that fills our imagination since childhood, Alice in Wonderland, and joined to one of the most traditional customs in America at this time of year, the egg hunt. That’s how we get an ‘egg hunt in wonderland’.” — Designed by Patrícia Garcia from Portugal.

Egg Hunt In Wonderland

Wonderful Things

“If you need to find anything beautiful, there is no better place than nature. Everything in nature is unique and beautiful in its own way!” — Designed by Dental Expression from Lee’s Summit, Missouri.

Wonderful Things

In The River

“Spring is here! Crocodiles search the hot and stay in the river.” — Designed by Veronica Valenzuela from Spain.

In The River

Freedom

“My choice to represent the month of April was the 25th of April in 1974 in Portugal, also known as the great revolution for freedom (‘Revolução dos Cravos’). It started with a political and social movement, which deposed the dictatorial regime of the New State. This date will always inspire us and remind us that freedom is worth fighting for and that people united are stronger than any kind of tyranny. For this reason, my project is called Freedom.” — Designed by Mirella Damasceno from Portugal.

Freedom

Signs

Designed by Tatiana Campos from Portugal.

Signs

Happy Easter!

“Celebrated all around the world in Christian tradition, April is the month of Easter. For kids Easter is about bunnies and painted eggs. Because April is also the month of early spring I chose joyful colours to give life to this lovely Easter illustration.” — Designed by Joana Duarte from Portugal.

Happy Easter!

Hanami

“Every year around April, the cherry blossom marks the beginning of spring in Japan. There is a tradition of watching this phenomenon which the locals refer to as ‘Hanami’ — flower viewing. This event occurs for a short time because of the cherry blossom’s short lifespan. The concept of Hanami reminds us that we should appreciate and even celebrate life in all its beauty and fragility while we can.” — Designed by Tetyana Malakhova from Portugal.

Hanami

Aphrodite

“Every month of our calendar is named after a god or goddess. The month of April is named after Aphrodite, the Greek goddess of love.” — Designed by Rita Falé from Portugal.

Aphrodite

From The Archives

A lot of things have inspired the community to create their April wallpapers in the past few years — be it a tasty bowl of soup on a rainy day or grabbing their bike and exploring new places. Below you’ll find some of these almost forgotten favorites. Please note that they don’t come with a calendar.

April Is The Nicest Month

“T.S. Eliot wrote in 1922 that ‘April is the cruelest month,’ but we quite disagree. April is the month when spring has finally come so nature starts blooming, providing us with more time to go out into nature and enjoy nice weather, long walks, and riding a bike. This is our message to you: go out and play. We surely will.” — Designed by PopArt Studio from Serbia.

April Is The Nicest Month

Wildest Dreams

“We love the art direction, story and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by Kasra Design from Malaysia.

Wildest Dreams

No Winter Lasts Forever

“Here comes spring, breathing new life into the world around us.” — Designed by Norjimm Pvt Ltd from India.

No Winter Lasts Forever

April Insignia

“April — its first day reminds us that laughter makes life better. Nature also laughs, but it does so in daisies!” — Designed by Ana Masnikosa from Belgrade, Serbia.

April Insignia

Once Upon A Time

“April is the month of spring but also the month of books. ‘A book is a proof that humans are capable of doing magic.’ (Carl Sagan)” — Designed by Verónica Valenzuela from Spain

Once Upon A Time

Nikes On My Feet

“We got inspired by the song ‘Nikes on My Feet’ by Mac Miller, which was perfect for the upcoming month of April and the warm weather that spring brings. As Mac Miller said, ‘All I really need is some shoes on my feet…” — Designed by PopArt Web Design from Serbia.

Nikes On My Feet

Colors Of April

“My daughter was born in April so this month reminds me of that colorful, bright and precious moment.” — Designed by Izabela Grzegorczyk from Poland.

Colors Of April

Bad Bunny

“This bad bunny is just waiting for Easter.” — Designed by Izabela from Poland.

Bad Bunny

Springing

“It’s spring already, my favourite season! You can smell it, you can see it, you can feel it in the air. Trees blossom, the grass is smiling at the sun, everything is so eager to show itself.” — Designed by Vane Kosturanov from Macedonia.

Springing

Rainy Day

Designed by Xenia Latii from Berlin, Germany.

Rainy Day

Spring Fever

“I created that mouse character for a series of illustrations about a poem my mom often told me when I was a child. In that poem the mouse goes on an adventure. Here it is after the adventure, ready for new ones.” — Designed by Anja Sturm from Germany.

Spring Fever

Citrus Passion

Designed by Nathalie Ouederni from France.

Citrus Passion

Sweet April Showers Do Bring May Flowers

“Discover the seasonal fruits and vegetables in April: artichoke and beans walking in the rain!” — Designed by Vitaminas Design from Spain.

Sweet April showers Do bring May flowers

Ipoh Hor Fun

“Missing my hometown’s delicious ‘Kai See Hor Fun’ (in Cantonese), that literally translates to ‘Shredded Chicken Flat Rice Noodles’. It is served in a clear chicken and prawn soup with chicken shreds, prawns, spring onions and noodles.” — Designed by Lew Su Ann from Brunei.

Ipoh Hor Fun

Noisy Neighbors

Designed by Katerina Bobkova from Ukraine.

Smashing Wallpaper - April 2012

Jean-Cloud Van Damme

“Hope that this little cloud will make you laugh. Happy Fools’ Day everybody.” Designed by Marika Smirnova from Russia.

Smashing Wallpaper - April 2012

Umbrella Season

“In my neck of the woods, April means a lot of rain, and therefore a lot of umbrellas. I’ve noticed a lot of pretty unique umbrellas out there, especially when I walked to class in college. Happy Umbrella Season!” — Designed by Angelia DiAntonio from Ohio, USA.

Umbrella Season

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Thank you to all designers for their participation. Join in next month!

Source: Smashing Magazine, Blooming Colors And April Adventures (2019 Wallpapers Edition)

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

dreamt up by webguru in Uncategorized | Comments Off on Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Suzanne Scacca



Just a few years ago, design blogs were all abuzz with tips on how to build websites for the millennial consumer. At this point, however, that’s old news. We know what millennials want from the online experience and have, for the most part, been able to meet their expectations.

But now we have a new generation of consumers to worry about: Generation Z.

Are they all that different from millennials?

As an old millennial myself, I can tell you that this next generation is one I don’t feel much of a connection to. I can remember a time when the most exciting part of my day was when my mom got off the phone and I was able to finally connect to the Internet with our dial-up AOL account.

This next generation doesn’t understand any of that. They weren’t caught between worlds the way many millennials were, which means they have a whole different set of expectations when it comes to the technology they interact with on a daily basis.

Consider this your quick and dirty guide to designing mobile websites for Gen Z.

What You Need to Know About Designing Mobile Web for Gen Z

According to Reality Bytes, a report published by WP Engine and The Center For Generational Kinetics, Gen Z cannot live without Internet access. More specifically:

  • 55% won’t go more than five hours without it.
  • 27% won’t go more than one.

Now, what’s really interesting about this particular generation is that, despite their attachment to the Internet, 61% of them prefer to shop on websites instead of mobile apps.

Considering how long they’ve had smart devices in their hands, it’s surprising that they’d gravitate towards browsers over native applications. That just goes to show you that native apps aren’t necessarily the best way to reach a mobile audience (especially if you want to make money from your app).

But all this is good news for you. Mobile apps are expensive to build and time-consuming to maintain. Plus, it’s quite difficult to convert users on mobile apps. If you were nervous about having to make the leap into mobile app development, or about losing money to those working in that field, don’t be. Generation Z wants your clients’ websites.

Now that you know which experience Gen Z is more likely to lean towards, it’s time to discuss designing for it.

Entertain Them

Before you do anything else, think about how to engage Gen Z visitors with entertainment.

According to Reality Bytes, entertainment is the primary reason why they visit the Internet:


Gen Z loves entertainment
Generation Z overwhelmingly prefers to be entertained online over anything else. (WP Engine) (Large preview)

Until now, the primary reason why consumers flocked to the Internet was for informational purposes. But that’s not all bad news for you as it means you have an excuse to reach out to older clients and say:

“Hey, times are changing! Here’s what’s on trend now and what your website needs in order to reach these new consumers.”

Just be careful: even for the most relaxed and youthful company, you don’t want to go over the top with adding entertaining elements into a mobile website. Just because 66% of Generation Z consumers name gaming as their #1 hobby doesn’t mean you need to build a mobile game and put it on your site. (Leave that to the gaming app developers.)

Instead, look at subtle ways to surprise Generation Z with something unexpected and engaging.

The first place to start? Video.

KFC has a great example of this right on its home page:


KFC funny video
KFC shares its well-known and hilarious video ads on its home page. (Source: KFC) (Large preview)

There’s a number of reasons why this video example is so awesome.

First, every visitor to the website — both on desktop and mobile — will see it right away. On mobile, visitors can’t even scroll down the home page. What you see above is what you get.

Next, this ensures your visitors get a taste of the brand’s humor and personality. Whereas content-driven sites or blogs can do that with GIFs and memes, Gen Z might not take the time to read content. Video makes sure they won’t miss out.

Also, this video is totally on brand, showcasing KFC’s humor in video form.

Even if you don’t have a humorous mascot to trot around, show off your client’s CEO or other engaging brand ambassador. Video is a great way to quickly suck Gen Z visitors in and let them know this is not going to be a dry or unmemorable experience.

If you don’t have video to play with, that’s okay. Think about adding humor as you educate visitors. Old Spice demonstrates:


Old Spice’s funny Ingredients pages
Old Spice’s informative, yet funny Ingredients pages. (Source: Old Spice) (Large preview)

Old Spice is another company that’s known for its entertaining video ads. However, their website also contains some humorous gems where you’d least expect them:

In the Ingredients section.

Visitors that are concerned about the ingredients within their deodorant can visit this page to learn more about what goes into each of the products. But read those descriptions closely. Not only are they transparent about what’s inside, but they also do it in a casual and playful way which says:

“Hey, we’re taking your concerns seriously. But don’t sweat it. We got you.”

Another way you can appeal to the entertainment-loving Generation Z is to add a social component to your site.

Don’t worry about building your own social network, community or forum either. Gen Z is going to flock to their favorite social platforms for that purpose: YouTube, Snapchat, Instagram, etc.

Instead, think about what it is that makes those environments so engage-worthy. Here’s an example from the Gymshark Central blog:


Gymshark blog post reactions
Gymshark uses social media-like reactions to improve blog engagement. (Source: Gymshark) (Large preview)

The blog post looks like any other. However, at the bottom of each post is this emoji reaction system. That’s pretty unique, right? Plus, this type of engagement doesn’t require much work from the reader. Simply click on the recognizable and well-labeled emoji and let the writer know what you thought of the content.

Another reason why this works so well is because Gymshark actively targets Gen Z customers. If you look on their website, you’ll see a section where they give discounts to college students.

So, if your client’s website needs to reach a younger audience, take a lesson from Gymshark. There’s no need to do a complete overhaul and convert an otherwise well-designed website into a superficial social network. Instead, add the most engaging elements from social networks and encourage your Gen Z visitors to interact more.

Personalize It

Think about what makes video games and social media so attractive to Gen Z. There’s obviously the fun aspect of it, but there’s another force at play that keeps users returning time and time again:

And that’s personalization.

This is something you should already be designing your mobile websites for as you target millennial consumers. However, if you haven’t bothered to add personalized touches to your sites, yet, you’re going to need to take this more seriously now.

Forbes Agency Council and YPulse worked together to find out what Generation Z really wants in terms of personalized experiences. Here’s a snippet from their findings:

“71% of the 3,000 respondents ages 14–29 said they prefer to receive offers that are customized to their location. In the same survey, 80% said they expect tailored onscreen experiences that not only target location but also recognize their interests and habits — who they are and how they self-identify.”

With 44% of Gen Z more likely to give up their personal data than other generations, you can’t afford to ignore this one.

One way to deliver a personalized experience based on what Gen Z visitors want is through push notifications. The only problem is, whether you have a mobile website or a progressive web app, push notifications are not supported on iOS devices.

While you can still use them to connect with Android users, consider other means for personalization that will help you connect with 100% of them.

Take, for instance, something as seemingly simple as what Amazon does with data:


Amazon home page personalization
About ¾ of the Amazon mobile home page contains personalized information. (Source: Amazon) (Large preview)

As you can see here, Amazon has saved a whole bunch of information about me:

  • My name and account information;
  • My cart items (which were not put there on this shopping trip);
  • My delivery location.

I also happen to own a Fire TV Stick, so this top ad is super relevant to me. Overall, I’m quite pleased with how tailor-made this first step inside the mobile website feels.

If you’re building a registration or membership system into your client’s website, make sure you’re leveraging user data to provide a personalized experience for them.

And if you don’t have a reason to ask mobile visitors to log in, that’s okay. You can still gather information by placing simply designed email subscription forms on the mobile website — preferably above the fold or at the very bottom. And most definitely on the home page.

Here’s a nice example from inkbox:


inkbox subscription form
inkbox uses a subscription form to start collecting information on visitors. (Source: inkbox) (Large preview)

inkbox has done a nice job with this subscription form. Even if mobile users scroll past the content on the page, they’re likely to see that white box screaming back at them, begging them to sign up.

Because there’s such a low commitment compared to the potential for such valuable rewards (like information on new products and access to exclusive discounts), Generation Z visitors will love this. Like I said earlier, they’re more than willing to give you their personal data if you can make it worth their while.

For mobile websites with a brick-and-mortar presence, geolocation features are non-negotiable. Generation Z shoppers often use their mobile devices while in-store, so this would definitely take their experience to the next level.

One of the easiest ways to implement this is with geolocation sensors like the ones used by The North Face:


The North Face geolocation features
The North Face auto-populates search parameters based on the user’s location. (Source: The North Face) (Large preview)

The above screenshot is what happens when I use the Find a Store feature on the mobile website. What’s great about this is it detected my location (which is currently Boston) and it auto-populated my search query with a nearby store.

Mobile users don’t have time to waste and Gen Z certainly won’t take kindly to a website that forces them to do all the work. Take what you know about your user — even if all you can detect is a location — and make their job of connecting with you easier.

Make Them Feel Special

Now, there’s a difference between adding personal touches to a website and taking it up a notch so that Generation Z visitors feel special. They’re going to need you to make them feel like their money and opinions and faces are worth more than anyone else’s.

You have to remember, this is the generation that grew up with reality TV and smartphone cameras pointed at their faces. That’s why it’s no surprise they’re known as the “influencer” generation.

On a related note, this makes Generation Z much more likely to build a relationship with brands as there’s the hope that, someday, they’ll reward their loyalty with a public-facing partnership.

Your clients will ultimately have to decide how far they want to take this. After all, affiliate partnerships and influencer marketing won’t make sense for everyone. That said, there are other ways to reap the advantages of having a generation of consumers willing to “help” a brand out.

According to data from the IBM Institute for Business Value and the National Retail Federation, 44% of Generation Z consumers said they’d be happy to share ideas for product design. That makes sense as that level of contribution will make them feel like they have more invested in the relationship with the company.

While your clients need to decide if consumers have any say in the shaping of their offering, you can do something about this from the web design side of things.

Check out what the Panera website is doing to solicit visitors for feedback:


Panera feedback request
Panera calls attention to its redesign and asks visitors for feedback. (Source: Panera) (Large preview)

These “Feedback” tabs are a somewhat new feature on the web, but more and more websites are certainly taking advantage of it. With this intro pop-up from Panera, it’s looking as though they want to make sure their visitors take notice, too.

This is a smart move in terms of trying to appeal to a younger audience. You let them know, straight out the gate, “We made some changes!” and then ask them to provide feedback. But that’s not all. Panera is saying: “Thanks for your help.” This implies that they want customers to take a greater part in shaping both the online experience and the brand itself.

There are other ways to make Generation Z feel like they’re more than just the average customer.

Sephora has created something called the “Rewards Bazaar” to layer on top of its more traditional BeautyInsider loyalty program:


Sephora Rewards Bazaar loyalty program
Rewards Bazaar is Sephora’s point-based rewards system that can be used to buy products and experiences. (Source: Sephora) (Large preview)

The Rewards Bazaar program works similarly to credit card points or airline miles programs. In other words, the more money customers spend with Sephora, the more points they accumulate.

And points don’t just buy them more Sephora goods. Points buy them experiences, like an Algenist R&R sleep retreat in Tucson, Arizona. They can also get “swag” bundles full of makeup and body products, clothes, artwork and more.

Sephora is rewarding their loyalty with celeb-like treats.

If you want to go crazy and actually encourage Gen Z customers to act like the influencers they so desire to be, take inspiration from this American Eagle example:


American Eagle’s unofficial influencer program
American Eagle asks customers to become unofficial influencers with AE x ME. (Source: American Eagle) (Large preview)

Generation Z customers already have their cameras ready to snap the next Insta-worthy photo, so why not give them a reason to put it to good use?

American Eagle has created an influencer-like program called AE x ME. Really, this is nothing more than a brilliant ploy to ask customers for user-generated content that American Eagle can then use on its website and beyond.

Whereas brands usually have to dig around for these types of photos or videos featuring their products in action, American Eagle is saying:

“You’re going to take pictures of your awesome new duds anyway. Why not let us show them off to a much larger audience for you?”

That’s not the only reward American Eagle dangles in front of influencers. While most of the people featured get a unique URL that features their Instagram handle and some information about them, there’s a profile at the bottom of this page that suggests there might be a greater opportunity here.


American Eagle influencer rewards
American Eagle turned a customer into a campaign model. (Source: American Eagle) (Large preview)

Daevin tagged American Eagle in one of his posts and then was flown out to become one of the faces in an upcoming campaign for the famous clothing brand. If that’s not living the dream for Gen Z influencer wannabes, I don’t know what is.

Keep It Real

One last thing to keep in the back of your minds as you design websites for Generation Z is the “keep it real” component. Anyone else remember this Dave Chappelle gem?

Chappelle Show keep it real GIF
Dave Chappelle struggles to keep it real, long before Gen Z had a say in it. (Source: Giphy)

Gen Z has very high standards when it comes to the authenticity of a company. And, not only that, they expect brands to be socially good, too.

Reality Bytes reports that:

  • 79% of Gen Z consumers respect brands more if they keep their images Photoshop-free.
  • 84% of them trust companies that put real customers in their ad campaigns (see American Eagle’s example above).
  • 69% of them will buy from companies that give money to and support good causes.

Really, what all of this data points to is this:

Generation Z wants to know that they’re engaging with genuinely good and honest people; not just a brand name.

That’s why, if your clients have a strong mission and values, their websites need to have one page specifically dedicated to them.

One way to do this is with a partnership highlight page like eos has:


eos recycling page
eos touts its recycling initiatives and partnership with TerraCycle. (Source: eos) (Large preview)

The eos website actually has two pages dedicated to this recycling cause. The first is called “Social Responsibility” where the company discusses its mission to build clean products. The second is called “TerraCycle” where it goes more into the recycling partnership.

For consumers looking to buy from companies that take causes like this seriously, these landing pages may be all they need to convince them to convert.

Samsung does something similar on its About Us page, except the key difference is that it calls out social responsibility and sustainability as part of its core company values:


Samsung social responsibility page
Samsung makes it its mission to make the environment a priority. (Source: Samsung) (Large preview)

This way, it’s not just Samsung telling customers where their products come from or where they end up. Instead, their entire identity becomes synonymous with this mission to create a better world.

When you compare them to companies that prioritize profit before anything else or who have been accused of being dishonest for the purposes of driving up their bottom line, Samsung stands out as a shining example of what to do.

Another way to stand out with this concept of social goodness is by showing customers how they’re contributing to a good cause by giving their business to them.

The Giving Keys is a brand that’s built its entire concept around this.


The Giving Keys social goodness
The Giving Keys highlights customer stories. (Source: The Giving Keys) (Large preview)

The Giving Keys isn’t just a website to buy jewelry from. This is a place where consumers can make a difference in more ways than one. It works like this:

  • Customers purchase a piece of jewelry and add a personalized inscription to the key charm.
  • They then give the inspirational message jewelry to someone who needs it. (The website features a section where customers can “Share Your Story” to talk about who they gave it to and why.)
  • In turn, the company uses a portion of the sale to help create jobs for the homeless.

This is the kind of thing that makes Generation Z stop and think twice about giving their money to a money-hungry mega brand instead of a smaller company that backs a good cause.

Wrapping Up

It’s an interesting thing, isn’t? Raise kids in a certain timeframe and environment and they’ll turn out to be completely different shoppers than the generations before them.

Thankfully, the same kinds of technologies that have powered Generation Z’s lives are the ones we can use to learn more about them. And we’ve certainly learned a lot. As you go about designing websites for clients in the future, don’t forget to bring up the Gen Z question to them. Even if they’re not selling to them now, someday in the not-so-distant future, they will.

Further Reading on SmashingMag:

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, Rundown Of Gen Z: What Does This Mean For Mobile Designers?