emGee Software Solutions Custom Database Applications

Share this

Smashing Magazine

Recent content in Articles on Smashing Magazine — For Web Designers And Developers
Updated: 1 week 1 day ago

I Used The Web For A Day With Just A Keyboard

Wed, 07/04/2018 - 04:30
I Used The Web For A Day With Just A Keyboard I Used The Web For A Day With Just A Keyboard Chris Ashton 2018-07-04T13:30:05+02:00 2018-07-11T12:36:25+00:00

This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties faced by real people, which are avoidable if we design and develop in a way that is sympathetic to their needs. Last time, I used the web for a day without JavaScript. Today, I forced myself to navigate the web using just my keyboard.

Who Uses The Keyboard To Navigate?

Broadly, there are three types of keyboard users:

  • Mobility-impaired users who struggle to use a mouse,
  • Vision-impaired users who are unable to see clickable elements in the page,
  • Power users who are able to use a mouse but find it quicker to use a keyboard.
How Many Users Are We Talking?

I’ve trawled the web for statistics on keyboard usage, and I couldn’t find a thing. Seriously. Not one study.

Most keyboard accessibility guidance sites simply take for granted that “many users” rely on keyboards to get around. Anyone trying to get an approximate number is usually preachily dismissed with “stats don’t matter — your site should be accessible, period.”

Yes, it is true that the scale of non-mouse usage is a moot point. If you can make a change that empowers even one user, it is a change worth making. But there are plenty of stats available around things like color blindness, browser usage, connection speeds and so on — why the caginess around keyboard statistics? If the numbers are as prevalent as sites seem to suggest, surely having them would enable a stronger business case and make defending keyboard accessibility to your stakeholders easier.

Getting the process just right ain't an easy task. That's why we've set up 'this-is-how-I-work'-sessions — with smart cookies sharing what works really well for them. A part of the Smashing Membership, of course.

Explore features →

The closest thing to a number I can find is an article on PowerMapper, which suggests that 7% of working-age adults in the US, UK, and Canada have “severe dexterity difficulties.” This would make them “unlikely to use a mouse, and rely on the keyboard instead.”

Users with severe visual disabilities use software called a screen reader, which is software that reads out content on the screen as synthesized speech. Like sighted users, non-sighted users want to be able to scan pages for interesting information, so the screen reader has keyboard shortcuts for navigating via headings and links, and relies on keyboard focusable elements for interaction.

“People who are blind need full keyboard access. Period.”

— David Macdonald, co-editor of Using WAI ARIA in HTML5

These same users also have screen readers on their mobile devices, where they use swipe gestures instead of keyboard presses to ‘tab around’ content. So whilst they’re not literally using a keyboard, they do require the site to be keyboard-accessible as the screen reader technology hooks into the same tab ordering and event listeners as if they were using a keyboard. It’s worth noting that only about two-thirds to three-quarters of screen reader users are blind, meaning the rest might use a combination of screen-reader and magnification techniques.

2.3% of American people (of all ages) have a visual disability, not all of which would necessarily warrant the use of a screen reader. In 2016, Addy Osmani estimated actual screen reader usage to be around 1 to 2%. If we factor these users in with our mobility-impaired users and our power users, keyboard usage adds up to a sizeable percentage of the global audience. Therefore, caring about keyboard accessibility is not just doing the right thing morally (and legally — many countries require websites to be accessible by law), but it also makes good business sense.

With all of that in mind, what is the state of the web today? Time to find out!

I placed coasters over my touchpad to avoid temptation in using the keyboard for this experiment. (Large preview) The Experiment

What does everyone do when they have a day’s worth of intimidating work ahead of them? Procrastinate! I headed over to youtube.com. I had a specific video in mind and was grateful to find I wouldn’t need to tab into the main search box, as it is focussed on page load by default.

The autofocus Attribute YouTube homepage with search bar already in focus (Large preview)

I assumed this would be focussed with JavaScript on window load, but it’s actually handled by the browser with an autofocus attribute on the input element.

As a sighted keyboard user, I found this extremely useful. As a blind screen reader user, I’m not sure whether I’d like it or not. The consensus seems to be that judicious use of autofocus is OK, in cases where the sole purpose of the page is to interact with a form (e.g. Google landing page, or a site contact form).

Default Focus Styles

I searched for some Whose Line Is It Anyway? goodness, and couldn’t help noticing that YouTube hadn’t defined any custom :focus styles, instead relying on the browser’s native styling to visually indicate which elements I was tabbing through.

Chrome focus styling — the famous blue outline. (Large preview)

I’ve always been under the impression that not all browsers define their own :focus state, so you have to define your own custom styling. I decided to put this to the test and see which browsers neglect to implement a default style, but to my surprise, I couldn’t find one. Every browser I tested had its own native implementation of :focus, although each varied in style.

Firefox focus styling — a dotted outline. (Large preview) Safari focus styling — similar to Chrome but the blue halo is not as thick. (Large preview) Opera focus styling is identical to Chrome, as they are both built on the Blink browser engine. (Large preview) The focus styling in Edge is much the same as in Firefox. (Large preview) IE11 underlines the link with a dotted line. (Large preview)

I even went quite far back in time:

IE7 focus styling (on XP) looks much the same as today’s Firefox implementation! (Large preview)

If you’d like to see more, there is a comprehensive screenshot collection of different elements in browser native states.

What this tells me is that you can reasonably assume every browser comes with some basic :focus styling. It is OK to let the browser do the work. What you’re risking is inconsistency: all browsers style elements subtly differently, and some are so subtle that they’re not particularly visually accessible.

It is possible to disable the default browser focus styles — by setting outline: none on your element — but you should do this only if you implement your own styled alternative. Heydon Pickering recommends this approach, citing the unclear or ugly defaults used by some browsers. If you do decide to roll out your own styles, be sure to use more than just colour as a modifier: Add an outline or an underline or some other visual indicator to support users with color-blindness.

Many sites suppress default focus styles but fail to provide custom styles, leading to inaccessible experiences. If your site is using Eric Meyer’s CSS reset, it could be inaccessible; this commonly used file resets the default :focus styles but instructs the developer to write their own, and many fail to spot the instructions.

Some people argue that it can be confusing to the user if you disable the browser defaults, as they lose the visual affordance of the focus state they’re used to and instead have to learn what your site’s focus state looks like. On the other hand, some argue that the browser defaults are ugly, or even confusing to the non-keyboard user.

Why confusing? Well, check out this animated carousel format on the BBC. There are two navigation buttons — next, and previous — and it’s useful to the keyboard user that the focus remains on them throughout the narrative. But to the mouse user, it can be quite confusing that the clicked button is still ‘focussed’ after moving the cursor away.

BBC animated carousel format (Large preview) The :focus-visible CSS Selector

If you want the best of both worlds, you may want to explore the CSS4 :focus-visible pseudo-class, which will let you provide different focus styling depending on context. :focus-visible styling only targets elements that have been focussed with keyboard, not with mouse click. This is super cool, though is currently only natively supported in Firefox. It can be enabled in Chrome by turning on the ‘Experimental Web Platform Features’ flag.

The button is green when I tab to it via keyboard, and red when I click on it. (Large preview) YouTube Videos And Keyboard Accessibility

YouTube does a great job with its video player — every part of the player is keyboard navigable. I like how the volume controls slide out when you tab focus away from the mute icon, in contrast to sliding out when hovering over the mute icon.

Large preview

What I didn’t like was that helpful labels, such as the ‘Mute’ text that appears when hovering over the mute icon, don’t get shown on focus.

Another area that lets YouTube down is that it suppresses some focus styling. Here was me trying to tab to the ‘Show more’ button.

I try to tab to the “Show more” button via the video author avatar, title and links in the description, but end up tabbing to the “Add comment” section by accident. (Large preview)

I accidentally tabbed right past the ‘Show more’ button because I couldn’t see any :focus styling applied, whether custom or native. I figured out that the native styling was being overridden with outline-width:

Unchecking the outline-width: 0 rule enabled the blue border native Chrome focus styling. (Large preview) GitHub Keyboard Accessibility

OK, work time. Where better to work than at the home of code, github.com?

I noticed three things about GitHub: One great, one reasonable, and one bad.

First, the good.

‘Skip To Content’ Link GitHub landing view… keep an eye on this corner (Large preview)

GitHub offers a Skip to content link, which skips over the main menu.

After tabbing once, a wild Skip to content link appears! (Large preview)

If you hit ENTER while focussed on the ‘Skip to content’ link, you skip all of the menu items at the top of the page and can start to tab within the main area of content, saving time when navigating. This is a common accessibility pattern that is super useful for both keyboard and screen reader users. Around 30% of screen reader users will use a skip link if you provide one.

Alternatively, some sites choose to place the main content first in the reading order, above the navigation. This approach has fallen out of fashion as it breaks the guideline of making your DOM content match the visual order (unless your navigation visually appears at the bottom). And whilst this approach means we don’t need a ‘Skip navigation’ link at all, we’d probably want a ‘Skip to navigation’ link in its place.

Tab To See Content

One feature I noticed working differently to the ‘non-keyboard’ version was the code breakdown indicator.

Using the mouse, you can click the colored bar underneath any repository to view a proportional breakdown of the different programming languages used in the repo. Using the keyboard, you can’t actually navigate to the colored bar, but the languages come into view automatically when you tab past the end of the meta information.

I tab through to the code language breakdown, before showing how it’s done with a mouse. (Large preview)

This doesn’t really seem necessary — I would happily tab to the colored bar and hit ENTER on that — but this different behavior doesn’t cause any harm either.

Invisible Links

One problematic thing I came across was that there was an “invisible” link after tabbing past my profile picture at the top right. My tab order would tab to the picture, then to this invisible link, and then to the ‘Watch’ button on the repo (see gif below). I had no idea what the invisible link did, so when I recognized I was on it, I hit ENTER and was promptly logged out!

Beware of clicking invisible links. (Large preview)

On closer inspection, it looks like I’ve navigated to a “screenreader only” form (sr-only is a common screen reader class name) which has the ‘Sign out’ feature.

Large preview

This sign-out link is in addition to the sign-out link on your profile dropdown menu:

Large preview

I’m not sure that two separate HTML sign-out links are necessary, as a screen reader user should be able to trigger the drop-down and navigate to the main sign-out link. And if we wanted to keep the separate link, I would recommend applying a :focus styling to the screen-reader content so that sighted users don’t accidentally trigger logging themselves out!

Example screen-reader text focus styling. (Large preview) How To Make A ‘Skip To Content’ Shortcut

So how do we recreate that ‘Skip to content’ shortcut? It’s pretty simple to implement, but can be deceptively tricky to get perfect — so here is what I consider to be the Holy Grail of skip links solutions.

‘Skip link’ is alternatively called ‘Skip navigation’, ‘Skip main navigation’, ‘Skip navigation links’, or ‘Skip to main content’. ‘Skip to main content’ is probably the clearest as it tells you where you are navigating to, rather than what you are skipping over.

The shortcut link should ideally appear straight after the opening <body> tag. It could appear later in the DOM, even after the footer, provided you have a tabindex="1" attribute to force it to become the first interactive element in the tab order. However, using tabindex with a number greater than zero is generally bad practice and will often result in a warning when using validation tools such as Lighthouse.

It’s not foolproof to rely on tabindex, as you may have more than one link with tabindex="1". In these cases, it is the first link that would get the tab focus first, not any later links. Read more about using the tabindex attribute here, but remember that you’re always better off physically moving your link to the beginning of the DOM to be safe.

<a class="screen-reader-shortcut" href="#main-content"> Skip to main content </a>

The ‘Skip to main content’ link has limited use to sighted users, who can already skip the navigation by using their eyes. So, whilst some sites keep the skip link visible at all times, the convention nowadays is to keep the link hidden until you tab into it, at which point it is in focus and gains the styling applied by the :focus pseudo selector.

.screen-reader-shortcut { position: absolute; top: -1000em; } .screen-reader-shortcut:focus { position: fixed; top: 0; left: 0; z-index: 999; /* ...and now any nice styling you want to apply... */ padding: 1em; background-color: rgb(114, 105, 105); color: white; text-decoration: none; }

So, what are we actually skipping to? What is #main-content? It can really be anything:

  1. Inline content
    i.e. the id of your h1 tag: <h1 id="main-content">.
  2. Container
    e.g. the id of the container around your main content such as <main id="main-content">.
  3. Sibling anchor
    You can link to a named tag just above your main content, e.g. <a name="main-content"></a>. This approach is usually described in older tutorials — I wouldn’t recommend it these days.

For maximum compatibility across all screen readers, I’d recommend linking to the h1 tag. This is to ensure that the content gets read out as soon as you’ve used the skip link. Linking to containers can lead to funny behavior, e.g. the screen reader starting to read out all the content inside the container.

Your #main-content should also have a tabindex of -1, to ensure that it is programmatically focussable. Some screen readers may not obey the skip link otherwise.

<h1 id="main-content" tabindex="-1">This is the title of the page</h1>

One last consideration: legacy browser support. If you have enough users on IE9 or below, you may need to apply a small JavaScript fix to your skip links to ensure that the focus does actually shift as expected and your users successfully skip your navigation.

Why Are We Reinventing The Wheel?

It seems crazy that as web developers we have to implement this ‘skip navigation’ hack on all of our sites as a rule. You would think we could let the standards do the work.

Since HTML5, we’ve had semantic elements such as <main>, <nav> and <header>. Prior to that, we had ARIA landmarks such as role="main", role="navigation" and role="banner" respectively. In the current landscape of the web, best practice dictates that you need both, i.e. <main role="main">, which is a horrid violation of the DRY principle, but there we go.

With all this semantic richness, you’d hope that browsers would start natively supporting navigation via these landmark areas, for example by exposing a keyboard shortcut for users to tab straight into the <main> section of a web page. No such luck — there is no native support at the moment. Your best bet is to use the Landmark Navigation via Keyboard extension for Chrome, Opera or Firefox.

Screen reader users, however, can start navigating directly to these landmark regions. For example, on VoiceOver on Mac, you can hit CTRL + ALT + U to bring up the Landmarks Menu and go to the ‘main’ landmark, which is a quick and consistent shortcut to get to the main content. Of course, this relies on sites marking up their documents correctly.

Here is a good starting point for your site if you’d like it to be navigable via landmark regions:

<body> <header role="banner"> <!-- Logo and things can go here --> <nav role="navigation"> <!-- Site navigation links go here --> </nav> </header> <main role="main"> <!-- Main content lives here - including our h1 --> </main> <footer role="contentinfo"> <!-- Copyright statement, etc --> </footer> </body>

All this markup is thirsty work. Time for a coffee.

Pact Coffee

I remember seeing a flyer for pactcoffee.com… let’s go and take a look!

Cookie Banner Large preview

The ‘Cookie policy’ banner is one of the first things you notice here, and dismissing it is almost an instinctive reflex for the sighted mouse user. Some screen reader users may not care about it (if you’re blind, you wouldn’t know it’s there until you reach it), but as a sighted user, you see it, you want to kill it, and in the case of this site, you need to tab past ALL OF THE OTHER LINKS before you can dismiss it.

I used the ChromeLens accessibility extension to trace the tab order of the page:

I have to tab through every single link in the page before I can dismiss the cookie banner. (Large preview)

This can be fixed by either moving the notice to the top of the document (it can still be anchored to the bottom visually with CSS), or by adding a tabindex="1" to the OK button. I would suggest applying this fix to any content where the expectation is that the user will want to dismiss it.

More Invisible Links

Like on GitHub, I found myself tabbing to an off-screen element whose purpose wasn’t clear. It turned out to be a ‘See less…’ toggle that sits behind the ‘See more…’ card.

Tabbing from ‘See more’, to a hidden area, to another ‘See more’ button. What’s that mystery hidden area? Oh, it’s the ‘See less’ button “on the other side”. (Large preview)

This is because the ‘hidden’ area isn’t really hidden, it’s just rotated 180 degrees, using:

transform: rotateY(180deg);

…which means the ‘See less…’ button is still part of the tab order. This can be fixed by applying a display: none until the application is ready to trigger the rotation:

Applying display: none to the ‘See less…’ link takes it out of the tab order and makes for a less confusing keyboard experience. (Large preview)

Coffee ordered. It’s now time to carry on with my research.

IT World

I was doing some research for this article and came across a similar experiment to my own; Kevin Purdy browsed the web for seven days using only his keyboard. I find it ironic that I was unable to read his article under the same constraints!

The problem was a full-page cookie banner, requiring me to “Update Privacy Settings” or accept the default cookie settings. No matter how many times I tabbed, I could not focus in on the cookie banner and dismiss it.

Holding down TAB didn’t help. (Large preview)

I dug into the source code to find out what was going on. For a moment, I thought it might be our arch nemesis, the outline CSS property.

Large preview

Inspecting the “Update Privacy Setting” link, I can see an outline: 0 as I suspected. So perhaps I am focussing on the buttons, but there is no visual feedback when that happens?

I tried setting the state to :hover to see if I was missing out on any styling as a keyboard user:

Large preview

Sure enough, the link turned a nice, obvious orange colour on hover — something I never saw on focus:

Large preview

Hoorah! Cracked it! I never saw the :focus state because custom styling was only being applied on :hover. I must have skipped past the buttons without even noticing, right?

Wrong. Even when I hack the CSS locally, I could not see any focus styling, meaning I wasn’t even getting as far as tabbing into the cookie modal. Then I realised… the link was missing a href attribute:

Large preview

That was the real culprit. The outline: 0 wasn’t the problem — the browser was never going to tab to the link because it wasn’t a valid link!

From the HTML 5.2 specification:

The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.

Giving the links a href attribute — even if it’s just # — would make them valid links and would add them to the tab order of the page.

Funnily enough, later on that day, I was sent an article on PC World to read and I encountered exactly the same problem.

Large preview

It seems that both sites were using the same Consent Management Platform (CMP). I did a little digging and deduced that it was affecting a number of sites owned by the same company, and have since contacted them directly with a suggested fix.

Kinetico

My kitchen tap is leaking and I’ve been meaning to get it replaced. I saw an ad in the local paper for kinetico.co.uk, so thought I’d take a look.

It’s impossible to navigate to the nested menu items via a keyboard. (Large preview)

I couldn’t navigate to the ‘Kitchen Taps’ section, as the link was tucked away behind a ‘Salt & Cartridges’ parent link which only shows its child links on hover. It’s interesting that the site is forward-thinking enough to provide a ‘Skip to Content’ link (seen briefly in the gif above) but was unable to create an accessible menu!

Here is where the menu goes wrong — it only shows the sub menu when the parent menu item is being hovered over:

Fixing it is easier said than done. In most cases, you can just “double up” your selector to apply to focus too:

li:hover .nav_sub_menu, li:focus .nav_sub_menu { }

But this doesn’t work in this case because whilst the <li> element is hoverable, it isn’t focusable. It’s the link inside the <li> that is focusable. But the submenu isn’t inside the link, it’s next to it, so we need to apply the sibling selector to show the submenu when the link is in focus.

li:hover .nav_sub_menu, a:focus + .nav_sub_menu { }

This tweak means we can see our submenu when we tab to the parent menu item on the keyboard. But what happens when you try to tab into the submenu?

We can never tab to the ‘Frozen food’ child link of ‘Browse by Type’. (Large preview)

When we tab from the parent menu item, the focus shifts to the first link in the child menu as expected. But this moves focus away from the parent menu link, meaning the submenu gets hidden and the child menu items are removed from the tab order again!

This is a problem that can be solved with :focus-within, which lets you apply styling to a parent element if it or any of its child elements has the focus. So, in this case, we have to triple up:

li:hover .nav_sub_menu, /* hover over parent menu item, show child menu */ a:focus + .nav_sub_menu, /* focus onto parent menu item, show child menu */ .nav_sub_menu:focus-within { /* focus onto child menu item, keep showing child menu */ }

Our menu is now fully keyboard-accessible through pure CSS. I love creative CSS solutions, but a word of warning here: quite a lot “CSS-only” solutions in the wild fall down when it comes to keyboard navigation. Avoiding JavaScript doesn’t necessarily make a site more accessible.

We can now tab through all the submenu items. (Large preview)

In fact, a JS-driven menu might be a better shout in this case, as browser support for this solution is still quite poor. :focus-within can currently only be used in Chrome, Firefox, and Safari. Even in Chrome, I found it to be incompatible with the display: none logic used to show/hide the child menu; I had to hide my menu items by setting opacity: 0 instead.

OK, I’m done for the day. It’s now time to wind down with a bit of social media.

Facebook

Facebook does an incredible job here, providing a masterclass in keyboard accessibility.

On the very first TAB press, a hidden menu opens up, providing shortcuts to the most popular sections of the current page and links to other popular pages.

Facebook hidden menu exposing accessibility options (Large preview)

When you cycle through the page sections using the arrow keys, those sections are highlighted visually so that you can see where you would be tabbing to.

When I focus on the ‘Navigate Facebook’ option in the dropdown, the corresponding section is highlighted in blue. (Large preview)

The most useful feature is that Facebook provides a OPT + / (or ALT + /) shortcut to get back to the menu at any time, making use of the aria-keyshortcuts attribute.

<div class="a11y-help"> Press opt + / to open this menu </div> <div aria-label="Navigation Assistant" aria-keyshortcuts="Alt+/" role="menubar"> <a class="screen-reader-shortcut" tabindex="1" href="#main-content"> Skip to main content </a> </div>

Unlike the ‘skip to main content’ link, which is built on top of native anchoring technology and “just works”, the aria-keyshortcuts attribute requires the author to implement all the keyboard behavior, so you’re going to have to write some custom JavaScript if you want to use this.

Here is some JS which hides and shows the menubar area, which is a useful starting point:

const a11yArea = document.querySelector('*[role="menubar"]'); document.addEventListener('keydown', (e) => { if (e.altKey && e.code === 'Slash') { a11yArea.style.display = a11yArea.style.display === 'block' ? 'none' : 'block'; } }); Summary

This experiment has been a mixed bag of great keyboard experiences and poor ones. I have three main takeaways.

Keep It Stylish

By far the most common keyboard accessibility issue I’ve faced today is a lack of focus styling for tabbable elements. Suppressing native focus styles without defining any custom focus styles makes it extremely difficult, even impossible, to figure out where you are on the page. Removing the outline is such a common faux pas that there’s even a site dedicated to it.

Ensuring that native or custom focus styling is visible is the single most impactful thing you can do in the area of keyboard accessibility, and it’s often one of the easiest; a simple case of doubling up selectors on your existing :hover styling. If you only do one thing after reading this article, it should be to search for outline: 0 and outline: none in your CSS.

Semantics Are Key

How many times have you tried opening a link in a new tab, only for your current window to get redirected? It happens to me every now and again, and annoying as it is, I’m lucky that it’s one of the only usability issues I tend to face when I use the web. Such issues arise from misusing the platform.

Let’s look at this code here:

<span onclick="window.location = 'https://google.com'">Click here</span>

An able, sighted user would be able to click on the  <span> and be redirected to Google. However, because this is a <span> and not a link or a button, it doesn’t automatically have any focusability, so a keyboard or screen reader would have no way of interacting with it.

Keyboard-users are standards-reliant users, whereas the able, sighted demographic is privileged enough to be able to interact with the element despite its non-conformance.

Use the native features of the platform. Write good, clean HTML, and use validators such as https://validator.w3.org to catch things like missing href attributes on your anchors.

Content Is Key

You may be required to display cookie notices, subscription forms, adverts or adblock notices.

Do what you can to make these experiences unobtrusive. If you can’t make them unobtrusive, at least make them dismissible.

Users are there to see your content, not your banners, so put these dismissible elements first in your DOM so that they can be quickly dismissed, or fall back to using tabindex="1" if you can’t move them.

Finally, support your users in getting to your content as quickly as they can, by implementing the Holy Grail of ‘skip to main content’ links.

Stay tuned for the next article in the series, where I will be building upon some of these techniques when I use a screen reader for a day.

(rb, ra, il)
Categories: Web Design

CSS Grid Level 2: Here Comes Subgrid

Tue, 07/03/2018 - 04:00
CSS Grid Level 2: Here Comes Subgrid CSS Grid Level 2: Here Comes Subgrid Rachel Andrew 2018-07-03T13:00:47+02:00 2018-07-11T12:36:25+00:00

We are now over a year on from CSS Grid Layout landing in the majority of our browsers, and the CSS Working Group are already working on Level 2 of the specification. In this article, I’m going to explain what is currently part of the Working and Editor’s Draft of that spec. Note that everything here is subject to change, and none of it currently works in browsers. Take this as a peek into the process, I’m sure I’ll be writing more practical pieces as we start to see implementations take shape.

CSS Specification Levels

The CSS Grid features we can currently use in browsers are those from Level 1 of the CSS Grid specification. The various parts of CSS are broken up into modules; this modularisation happened when CSS moved on from CSS 2.1, which is why you sometimes hear people talking about CSS3. In reality, there is no CSS3. Instead, there were a set of modules which included all of the things that were already part of the CSS2.1 specification. Any CSS that existed in CSS2.1 became part of a Level 3 module, therefore, we have CSS Selectors Level 3, as selectors existed in CSS2.1.

New CSS features which were not part of CSS2.1, such as CSS Grid Layout, start out at Level 1. The CSS Grid Level 1 specification is essentially the first version of Grid. Once a specification Level gets to Candidate Recommendation status, major new features are not added. This means that browsers and other user agents can implement the spec and it can become a W3C Recommendation. If new features are to be designed, they will happen in a new Level of the specification. We are at this point with CSS Grid Layout. The Level 1 specification is at CR, and a Level 2 specification has been created in order for new features to be worked on. I would suggest looking at the Editor’s Draft if you want to follow along with specification discussions, as this will contain all of the latest edits.

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry → What Will Level 2 Of CSS Grid Contain?

Ultimately, the level 2 specification will contain everything that is already in Level 1 plus some new features. If you take a look at the specification at the time of writing, there is a note explaining that all of Level 1 should be copied over once Level 2 reaches CR.

We can then expect to find some new features, and Level 2 of the Grid Specification is all about working out the subgrid feature of CSS Grid. This feature was dropped from the Level 1 specification in order to allow time to properly understand the use cases for subgrid, and give more time to work on it without holding up the rest of Level 1. In the rest of this article, I’ll be taking a look at the subgrid feature as it is currently detailed in the Editor’s Draft. We are at a very early stage with the feature, however, this is the perfect time to follow along, and to actually help shape how the specification is developed. My aim with writing this article is to explain some of the things being discussed, in order that you can understand and bring your input to discussions.

What Is A Subgrid?

When using CSS Grid Layout, you can already nest grids. In the example below, I have a parent grid with six column tracks and three-row tracks. I have positioned an item on this grid from column line 2 to line 6 and from row line 1 to 3. I have then made that item a grid container and defined column tracks.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

The tracks of our nested grid have no relationship to tracks on the parent. This means that if we want to be able to line the tracks of our nested grid up with the lines on the outer grid, we have to do the work and use methods of calculating track sizes that ensure all tracks remain equal. In the example above, the tracks will look lined up, until an item with a larger size is added to one cell of the grid (making it use more space).

A small item means the tracks look as if they line up. (Large preview) With a large item, we can see the tracks do not align. (Large preview)

For columns, it is often possible to get around the above scenario, essentially by restricting the flexibility of grid. You could make your fr unit columns minmax(0,1fr) in order that they ignore item size when doing space distribution, or you could go back to using percentages. However, this removes some of the benefits of using grid and, when it comes to lining up rows in a nested grid these methods will not work.

Let’s say we want a card layout in which the individual cards have a header, body, and footer. We also want the header and footer to line up across the cards.

.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; } A set of cards (Large preview)

This works as long as the content is the same height in each header and footer. If we have extra content then the illusion is broken and the headers and footers no longer line up across the row.

We can’t get the headers to line up across the cards. (Large preview) Creating A Subgrid

We can now take a look at how the subgrid feature is currently specified, and how it might solve the problems I’ve shown above.

Note: At the time of writing, none of the code below works in browsers. The aim here is to explain the syntax and concepts. The final specification is also likely to change from these details. For reference, I have written this article based on the Editor’s Draft available on June 23rd, 2018.

To create a subgrid, we will have a new value for grid-template-rows and grid-template-columns. These properties are normally used with a track listing, which defines the number and size of the row and column tracks. When creating a subgrid, however, you do not want to specify these tracks. Instead, you use the subgrid value to tell grid that this nested grid should use the number of tracks and track sizing that the grid area it covers spans.

In the below code, I have a parent grid with 6-column tracks and 3-row tracks. The nested grid is a grid item on that parent grid and spans from column line 2 to column line 6 and from row line 1 to row line 4. This is just like our initial example, however, we can now take a look at it using subgrid. The nested grid has a value of subgrid for both grid-template-columns and grid-template-rows. This means that the nested grid now has 4- column tracks and 2-row tracks, using the same sizing as the tracks defined on the parent.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } The nested grid is using the tracks defined on the parent. (Large preview)

This would mean that any change to the track sizing on the parent would be followed by the nested grid. A longer word making one of the tracks in the parent grid wider would result in that track in the nested grid also becoming wider, so things would continue to line up. This would also work the other way: the tracks of the parent grid could become wider based on the content in the subgrid.

One-Dimensional Subgrids

You can have a subgrid in one dimension and specify track sizing in another. In this next example, the subgrid is only specified on grid-template-columns. The grid-template-rows property has a track listing specified. The column tracks will therefore remain as the four tracks we saw above, but the row tracks can be defined separately to the tracks of the parent.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

This means that the rows of the subgrid will be nested inside the parent grid, just as when creating a nested grid today. As our nested grid spans two rows of the parent, one or both of these rows will need to expand to contain the content of the subgrid so as not to cause overflows.

You could also have a subgrid in one dimension and the other dimension use implicit tracks. In the below example, I have not specified any row tracks, and gave a value for grid-auto-rows. Rows will be created in the implicit grid at the size I specified and, as with the previous example, the parent will need to have room for these rows or to expand to contain them.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); } Line Numbering And Subgrid

If we take a look at our first example again, the track sizing of our subgrid is dictated by the parent in both dimensions. The line numbers, however, act as normal in the subgrid. The first column line in the inline direction is line 1, and the line at the far end of the inline direction is line -1. You do not refer to the lines of the subgrid with the line number of the parent.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; } The nested grid starts numbering at line 1. (Large preview) Gaps And Subgrids

The subgrid will inherit any column or row gap set on the parent grid, however, this can be overruled by column and row gaps specified on the subgrid. If, for example the parent grid had a column-gap set to 20px, but the subgrid then had column-gap set to 0, the grid cells of the subgrid would gain 10px on each side in order to reduce the gap to 0, with the grid line essentially running down the middle of the gap.

We can now see how subgrid would help us to solve the second use case from the beginning of this article, that of having cards with headers and footers that line up across the cards.

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don’t have gaps */ } The Card Internals Now Line Up (Large preview) Line Names And Subgrid

Any line names on your parent grid will be passed down to the subgrid. Therefore, if we named the lines on our parent grid, we could position the item according to those line names.

.grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; } The line names on the parent apply to the subgrid. (Large preview)

You can also add line names to your subgrid, grid lines can have multiple line names so these names would be added to the lines. To specify line names, add a listing of these names after the subgrid value of grid-template-columns and grid-template-rows. If we take our above example and also add names to the subgrid lines we will end up with two line names for any line in the subgrid.

.grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; } The Line Names Specified on the subgrid are added to those of the parent. (Large preview) Implicit Tracks And Subgrid

Once you have decided that a dimension of your grid is a subgrid, this removes the ability to have any additional implicit tracks in that dimension. If you add more items that can fit, the additional items will be placed in the last available track of the subgrid in the same way that items are dealt with in overly large grids. A Grid Area created in the subgrid that spans more tracks than are available, will have its last line set to the last line of the subgrid.

As explained above, however, you can have one dimension of your subgrid behave in exactly the same way as a normal nested grid, including implicit tracks.

Getting Involved With The Process

The work of the CSS Working Group happens in public, on GitHub just like any other open-source project. This makes it somewhat easier to follow along with the work that it was the everything happened in a mailing list. You can take a look at the issues raised against Level 2 of the CSS Grid specification by searching for issues tagged as css-grid-2 in the CSS Working Group GitHub repository. If you can contribute thoughts or a use case to any of those issues, it would be welcomed.

There are other features that people have requested for CSS Grid Layout, and the fact that they haven’t been included in Level 2 does not mean they are not being considered. You can see the levels as a feature release might be in a product, just because some feature isn’t part of the current sprint, doesn’t mean it will never happen. Work on new web platform features tends to take a little longer than the average product release, but it is a similar process.

How Long Does This All Take?

Specification development and browser implementation is a somewhat circular, iterative process. It is not the case that the specification needs to be “finished” before we will see some browser implementations. The initial implementations are likely to be behind feature flags — just as the original grid specification was. Keep an eye out for these appearing, as once there is code to play with it makes thinking about these features far easier!

I hope this tour of what might be coming soon has been interesting. I’m excited that the subgrid feature is underway, as I have always believed it vital for a full grid layout system for the web, watch this space for more news on how the feature is progressing and of emerging browser implementations.

(il)
Categories: Web Design

Building Mobile Apps With Capacitor And Vue.js

Mon, 07/02/2018 - 05:00
Building Mobile Apps With Capacitor And Vue.js Building Mobile Apps With Capacitor And Vue.js Ahmed Bouchefra 2018-07-02T14:00:41+02:00 2018-07-11T12:36:25+00:00

Recently, the Ionic team announced an open-source spiritual successor to Apache Cordova and Adobe PhoneGap, called Capacitor. Capacitor allows you to build an application with modern web technologies and run it everywhere, from web browsers to native mobile devices (Android and iOS) and even desktop platforms via Electron — the popular GitHub platform for building cross-platform desktop apps with Node.js and front-end web technologies.

Ionic — the most popular hybrid mobile framework — currently runs on top of Cordova, but in future versions, Capacitor will be the default option for Ionic apps. Capacitor also provides a compatibility layer that permits the use of existing Cordova plugins in Capacitor projects.

Aside from using Capacitor in Ionic applications, you can also use it without Ionic with your preferred front-end framework or UI library, such as Vue, React, Angular with Material, Bootstrap, etc.

In this tutorial, we’ll see how to use Capacitor and Vue to build a simple mobile application for Android. In fact, as mentioned, your application can also run as a progressive web application (PWA) or as a desktop application in major operating systems with just a few commands.

We’ll also be using some Ionic 4 UI components to style our demo mobile application.

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry → Capacitor Features

Capacitor has many features that make it a good alternative to other solutions such as Cordova. Let’s see some of the features of Capacitor:

  • Open-source and free
    Capacitor is an open-source project, licensed under the permissive MIT license and maintained by Ionic and the community.
  • Cross-platform
    You can use Capacitor to build apps with one code base and to target multiple platforms. You can run a few more command line interface (CLI) commands to support another platform.
  • Native access to platform SDKs
    Capacitor doesn’t get in the way when you need access to native SDKs.
  • Standard web and browser technologies
    An app built with Capacitor uses standard web APIs, so your application will also be cross-browser and will run well in all modern browsers that follow the standards.
  • Extensible
    You can access native features of the underlying platforms by adding plugins or, if you can’t find a plugin that fits your needs, by creating a custom plugin via a simple API.
Requirements

To complete this tutorial, you’ll need a development machine with the following requirements:

  • You’ll need Node v8.6+ and npm v5.6+ installed on your machine. Just head to the official website and download the version for your operating system.
  • To build an iOS app, you’ll need a Mac with Xcode.
  • To build an Android app, you’ll need to install the Java 8 JDK and Android Studio with the Android SDK.
Creating A Vue Project

In this section, we’ll install the Vue CLI and generate a new Vue project. Then, we’ll add navigation to our application using the Vue router. Finally, we’ll build a simple UI using Ionic 4 components.

Installing The Vue CLI v3

Let’s start by installing the Vue CLI v3 from npm by running the following from the command line:

$ npm install -g @vue/cli

You might need to add sudo to install the package globally, depending on your npm configuration.

Generating a New Vue Project

After installing the Vue CLI, let’s use it to generate a new Vue project by running the following from the CLI:

$ vue create vuecapacitordemo

You can start a development server by navigating within the project’s root folder and running the following command:

$ cd vuecapacitordemo $ npm run serve

Your front-end application will be running from http://localhost:8080/.

If you visit http://localhost:8080/ in your web browser, you should see the following page:

A Vue application (View large version) Adding Ionic 4

To be able to use Ionic 4 components in your application, you’ll need to use the core Ionic 4 package from npm.

So, go ahead and open the index.html file, which sits in the public folder of your Vue project, and add the following &lt;script src='https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js'&gt;&lt;/script&gt; tag in the head of the file.

This is the contents of public/index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecapacitordemo</title> </head> <body> <noscript> <strong>We’re sorry but vuecapacitordemo doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script src='https://unpkg.com/@ionic/core@4.0.0-alpha.7/dist/ionic.js'></script> </body> </html>

You can get the current version of the Ionic core package from npm.

Now, open src/App.vue, and add the following content within the template tag after deleting what’s in there:

<template> <ion-app> <router-view></router-view> </ion-app> </template>

ion-app is an Ionic component. It should be the top-level component that wraps other components.

router-view is the Vue router outlet. A component matching a path will be rendered here by the Vue router.

After adding Ionic components to your Vue application, you are going to start getting warnings in the browser console similar to the following:

[Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>

This is because Ionic 4 components are actually web components, so you’ll need to tell Vue that components starting with the ion prefix are not Vue components. You can do that in the src/main.js file by adding the following line:

Vue.config.ignoredElements = [/^ion-/]

Those warnings should now be eliminated.

Adding Vue Components

Let’s add two components. First, remove any file in the src/components folder (also, remove any import for the HelloWorld.vue component in App.vue), and add the Home.vue and About.vue files.

Open src/components/Home.vue and add the following template:

<template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p> </ion-content> </ion-app> </template>

Next, in the same file, add the following code:

<script> export default { name: 'Home' } </script>

Now, open src/components/About.vue and add the following template:

<template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor | About </ion-title> </ion-toolbar> </ion-header> <ion-content padding> This is the About page. </ion-content> </ion-app> </template>

Also, in the same file, add the following code:

<script> export default { name: 'About' } </script> Adding Navigation With Vue Router

Start by installing the Vue router, if it’s not already installed, by running the following command from the root folder of your project:

npm install --save vue-router

Next, in src/main.js, add the following imports:

import Router from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'

This imports the Vue router and the “Home” and “About” components.

Add this:

Vue.use(Router)

Create a Router instance with an array of routes:

const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })

Finally, tell Vue about the Router instance:

new Vue({router, render: h => h(App) }).$mount('#app')

Now that we’ve set up routing, let’s add some buttons and methods to navigate between our two “Home” and “About” components.

Open src/components/Home.vue and add the following goToAbout() method:

... export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

In the template block, add a button to trigger the goToAbout() method:

<ion-button @click="goToAbout" full>Go to About</ion-button>

Now we need to add a button to go back to home when we are in the “About” component.

Open src/components/About.vue and add the goBackHome() method:

<script> export default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } } </script>

And, in the template block, add a button to trigger the goBackHome() method:

<ion-button @click="goBackHome()" full>Go Back!</ion-button>

When running the application on a real mobile device or emulator, you will notice a scaling issue. To solve this, we need to simply add some meta tags that correctly set the viewport.

In public/index.html, add the following code to the head of the page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> Adding Capacitor

You can use Capacitor in two ways:

  • Create a new Capacitor project from scratch.
  • Add Capacitor to an existing front-end project.

In this tutorial, we’ll take the second approach, because we created a Vue project first, and now we’ll add Capacitor to our Vue project.

Integrating Capacitor With Vue

Capacitor is designed to be dropped into any modern JavaScript application. To add Capacitor to your Vue web application, you’ll need to follow a few steps.

First, install the Capacitor CLI and core packages from npm. Make sure you are in your Vue project, and run the following command:

$ cd vuecapacitordemo $ npm install --save @capacitor/core @capacitor/cli

Next, initialize Capacitor with your app’s information by running the following command:

$ npx cap init

We are using npx to run Capacitor commands. npx is an utility that comes with npm v5.2.0 and that is designed to make it easy to run CLI utilities and executables hosted in the npm registry. For example, it allows developers to use locally installed executables without having to use the npm run scripts.

The init command of Capacitor CLI will also add the default native platforms for Capacitor, such as Android and iOS.

You will also get prompted to enter information about your application, such as the name, the application’s ID (which will be mainly used as a package name for the Android application) and the directory of your application.

After you’ve inputted the required details, Capacitor will be added to your Vue project.

You can also provide the application’s details in the command line:

$ npx cap init vuecapacitordemo com.example.vuecapacitordemo

The application’s name is vuecapacitordemo, and its ID is com.example.vuecapacitordemo. The package name must be a valid Java package name.

You should see a message saying, “Your Capacitor project is ready to go!”

You might also notice that a file named capacitor.config.json has been added to the root folder of your Vue project.

Just like the CLI suggests when we’ve initialized Capacitor in our Vue project, we can now add native platforms that we want to target. This will turn our web application into a native application for each platform that we add.

But just before adding a platform, we need to tell Capacitor where to look for the built files — that is, the dist folder of our Vue project. This folder will be created when you run the build command of the Vue application for the first time (npm run build), and it is located in the root folder of our Vue project.

We can do that by changing webDir in capacitor.config.json, which is the configuration file for Capacitor. So, simply replace www with dist. Here is the content of capacitor.config.json:

{ "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist" }

Now, let’s create the dist folder and build our Vue project by running the following command:

$ npm run build

After that, we can add the Android platform using the following:

npx cap add android

If you look in your project, you’ll find that an android native project has been added.

That’s all we need to integrate Capacitor and target Android. If you would like to target iOS or Electron, simply run npx cap add ios or npx cap add electron, respectively.

Using Capacitor Plugins

Capacitor provides a runtime that enables developers to use the three pillars of the web — HTML, CSS and JavaScript — to build applications that run natively on the web and on major desktop and mobile platforms. But it also provides a set of plugins to access native features of devices, such as the camera, without having to use the specific low-level code for each platform; the plugin does it for you and provides a normalized high-level API, for that matter.

Capacitor also provides an API that you can use to build custom plugins for the native features not covered by the set of official plugins provided by the Ionic team. You can learn how to create a plugin in the docs.

You can also find more details about available APIs and core plugins in the docs.

Example: Adding a Capacitor Plugin

Let’s see an example of using a Capacitor plugin in our application.

We’ll use the “Modals” plugin, which is used to show native modal windows for alerts, confirmations and input prompts, as well as action sheets.

Open src/components/Home.vue, and add the following import at the beginning of the script block:

import { Plugins } from '@capacitor/core';

This code imports the Plugins class from @capacitor/core.

Next, add the following method to show a dialog box:

… methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

Finally, add a button in the template block to trigger this method:

<ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>

Here is a screenshot of the dialog box:

A native modal box (View large version)

You can find more details in the docs.

Building the App for Target Platforms

In order to build your project and generate a native binary for your target platform, you’ll need to follow a few steps. Let’s first see them in a nutshell:

  1. Generate a production build of your Vue application.
  2. Copy all web assets into the native project (Android, in our example) generated by Capacitor.
  3. Open your Android project in Android Studio (or Xcode for iOS), and use the native integrated development environment (IDE) to build and run your application on a real device (if attached) or an emulator.

So, run the following command to create a production build:

$ npm run build

Next, use the copy command of the Capacitor CLI to copy the web assets to the native project:

$ npx cap copy

Finally, you can open your native project (Android, in our case) in the native IDE (Android Studio, in our case) using the open command of the Capacitor CLI:

$ npx cap open android

Either Android Studio will be opened with your project, or the folder that contains the native project files will be opened.

Capacitor project opened in Android Studio (View large version)

If that doesn’t open Android Studio, then simply open your IDE manually, go to “File” → “Open…”, then navigate to your project and open the android folder from within the IDE.

You can now use Android Studio to launch your app using an emulator or a real device.

Capacitor demo project (View large version) Conclusion

In this tutorial, we’ve used Ionic Capacitor with Vue and Ionic 4 web components to create a mobile Android application with web technologies. You can find the source code of the demo application we’ve created throughout this tutorial in the GitHub repository.

(lf, ra, yk, al)
Categories: Web Design

Summer On Your Desktop: Fresh Wallpapers For July 2018

Sat, 06/30/2018 - 05:00
Summer On Your Desktop: Fresh Wallpapers For July 2018 Summer On Your Desktop: Fresh Wallpapers For July 2018 Cosima Mielke 2018-06-30T14:00:55+02:00 2018-07-11T12:36:25+00:00

For most of us, July is the epitome of summer. The time for spending every free minute outside to enjoy the sun and those seemingly endless summer days, be it in a nearby park, by a lake, or on a road trip, exploring unfamiliar places. So why not bring a bit of that summer joy to your desktop, too?

In this post, you’ll find free wallpapers for July 2018 created by artists and designers from across the globe as it has been our monthly tradition since more than nine years already. Please note that some of the wallpapers come in two versions as usual (with and without a calendar for the month), while the best-of selection at the end of the post only covers the non-calendar versions. Have a great July — no matter what you have planned!

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?
Design Your Own Wallpaper

Igor Izhik has designed quite a lot of wallpapers for our monthly challenge. If you would like to get started yourself, check out his article in which he shares how he approaches all stages of the process as well as useful tips and tricks for creating illustrations in Adobe Illustrator. Get creative! →

Meet Smashing Book 6 with everything from design systems and accessible single-page apps to CSS Custom Properties, Grid, Service Workers, performance, AR/VR and responsive art direction. New frontiers in front-end and UX with Marcy Sutton, Harry Roberts, Laura Elizabeth and many others.

Table of Contents → Heated Mountains

“Warm summer weather inspired the color palette.” — Designed by Marijana Pivac from Croatia.

Triumphant July

“This summer started out hot, with eyes wide open and monitoring the World Cup in Russia. We wanted to decorate your desktop this July with this colorful Red Square illustration, just before the eagerly anticipated finale, hoping to see the trophy awarded to our players.” — Designed by PopArt Studio from Serbia.

Robinson Cat

Designed by Ricardo Gimenes from Sweden.

All You Need Is Ice Cream

“July is National Ice Cream Month! National Ice Cream Day is celebrated on the 3rd Sunday in July. On this day people celebrate with a bowl, cup or cone filled with their favorite flavor of ice cream. Share some ice cream and some love this month with my wallpaper!” — Designed by Melissa Bogemans from Belgium.

A Mighty Woman With A Torch

“Last year we visited NYC for the first time during the 4th of July. I took many photos of Lady Liberty and was so deeply inspired by her message.” — Designed by Jennifer Forrest from Indiana.

Night Sky Magic

Designed by Ricardo Gimenes from Sweden.

Fly Forever

“Challenges are a part of parcel of life. Surpassing each challenge would be difficult, but it is you who decide whether to keep going or shun the drive. No matter whatever circumstance you are in, ignite your mind and just fly forward into action to achieve what you are capable of and what is beyond your reach.” — Designed by Sweans from London.

Smile, It’s Summer

“July brings me to summer, and last year in summer, I went to Salzburg, Austria where I took this photo. So every beginning of summer, I think about Salzburg and how sunny and warm it was there.” — Designed by Ilse van den Boogaart from The Netherlands.

Even Miracles Take A Little Time

“‘One day, the people that didn't believe in you will tell everyone how they met you.’ Believe in Yourself. Give it all that you can, take your own sweet time and be your own miracle!” — Designed by Binita Lama from India.

July Favorites

Lots of beautiful wallpapers have been created in the nine years since we embarked on our wallpapers adventure. And since it’d be a pity to let them gather dust, we once again dived deep into our archives on the lookout for some July treasures. Please note that these wallpapers, thus, don’t come with a calendar.

A Flamboyance Of Flamingos

“July in South Africa is dreary and wintery so we give all the southern hemisphere dwellers a bit of colour for those grey days. And for the northern hemisphere dwellers a bit of pop for their summer! The Flamboyance of Flamingos is part of our ‘Wonderland Collective Noun’ collection. Each month a new fabulous collective noun is illustrated, printed and made into a desktop wallpaper.” — Designed by Wonderland Collective from South Africa.

Summer Essentials

“A few essential items for the summertime weather at the beach, park, and everywhere in-between.” — Designed by Zach Vandehey from the USA.

Summer Cannonball

“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by Maria Keller from Mexico.

Mason Jar

“Make the days count this summer!” — Designed by Meghan Pascarella from the USA.

Birdie Nam Nam

“I have created a pattern that has a summer feeling. For me July and summer is bright color, joy and lots of different flowers and birds. So naturally, I incorporated all these elements in a crazy pattern.” — Designed by Lina Karlsson from Sweden.

Spectate

Designed by Tekstografika from Russia.

Summer Never Ends!

“July is a very special month to me — it’s the month of my birthday and of the best cherries.” — Designed by Igor Izhik from Canada.

World Ufo Day

“The holiday dedicated to those who study the phenomena that have no logical explanation, and the objects, which is attributed to an extraterrestrial origin.” — Designed by Cheloveche.ru from Russia

Captain Amphicar

“My son and I are obsessed with the Amphicar right now, so why not have a little fun with it?” — Designed by 3 Bicycles Creative from the USA.

Tropical Lilies

“I enjoy creating tropical designs, they fuel my wanderlust and passion for the exotic. Instantaneously transporting me to a tropical destination.” — Designed by Tamsin Raslan from the USA.

Day Turns To Night

Designed by Xenia Latii from Germany.

Eternal Summer

“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Taste Like Summer!

“In times of clean eating and the world of superfoods there is one vegetable missing. An old forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it — dip it!” — Designed by Alexandra Tamgnoué from Germany.

Road Trip In July

“July is the middle of summer, when most of us go on road trips, so I designed a calendar inspired by my love of traveling and summer holidays.” — Designed by Patricia Coroi from Romania.

World Chocolate Day

Designed by Cheloveche.ru from Russia.

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!

(il)
Categories: Web Design

How To Craft The Perfect Web Developer Ré­su­mé

Fri, 06/29/2018 - 05:00
How To Craft The Perfect Web Developer Ré­su­mé How To Craft The Perfect Web Developer Ré­su­mé Aditya Sharma 2018-06-29T14:00:26+02:00 2018-07-11T12:36:25+00:00

Did you know that your ré­su­mé could be the reason that’s holding you back from that 150k+ job that you know you deserve? This guide is dedicated to all the web developers out there and will demonstrate how you can create a successful ré­su­mé that will get you more shortlists than you can fathom. If it’s a piece of paper that is standing between you and your dream job, it’s time to show who’s the boss.

Our guide to making a killer ré­su­mé will broadly talk about the following:

  1. Why Would A Web Developer Need A Ré­su­mé In The First Place?
  2. Ré­su­mé Format: Sorting Out The Key Elements Of A Web Developer Ré­su­mé
  3. Professional Summary
  4. Technical Skills
  5. Managerial Skills
  6. Professional Experience
  7. Education Section In A Web Developer Ré­su­mé
  8. Technical Projects
  9. Additional Sections In The Web Developer Ré­su­mé
  10. ATS Optimization
  11. Key Takeaways
  12. A Sample Ré­su­mé To Get You Started
Why Would A Web Developer Need A Ré­su­mé In the First Place? I don’t need a ré­su­mé! I’ll have a job before I wake up tomorrow!

I sighed. He was a brilliant web developer and we both knew it. He felt he was wasting away his life and deserved something better — I agreed. He gave his two weeks’ notice and was under the impression that a new job as well as a better profile will just land on his lap.

But he had ignored that singular piece of document which has a track record of making or breaking people’s lives — the humble ré­su­mé.

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

As part of my job, I go through dozens of ré­su­més on a daily basis. I had seen his ré­su­mé as well. I wish I had the heart to tell him that just being a kickass developer isn’t enough — you have to convince the same to the recruiter on a 1-pager. And while accomplishing a task like that is not rocket science, it’s not a walk in the park either.

Web developers know that a lot depends on networking and client recommendations, so a ré­su­mé usually takes a backseat in most cases. Couple that with a growing demand and you know there won’t ever be a shortage of projects.

So why to waste time on a web developer ré­su­mé? Let’s take a moment and study this graph below:

Graph showing the demand for web developers from 2012-2016. (Large preview)

The data is taken from Indeed.com, and if you notice the trend in the past few years, you’ll observe two main facts:

  • With the advent of web-based startups, the peak of web development was 5-6 years ago and has either been steady or in a decline.
  • For jobs that require web development as the only skill, the demand is steady, as of now.

Additionally, going by Forbes’ analysis, fields like AI, AR and Data Science are the new up-and-coming stalwarts in the tech industry. Influencers and tech experts strongly believe that these domains have the ability to revamp the way we’ve been doing things until now. So while the demand for web developers is steady right now, the picture is not all rosy.

Sure, as a web developer, you are confident that you’ll never have a shortage of projects. You have a list of happy clients which you served in the past and you believe that their network is enough to sustain you. But if you look at the tech industry in general and see how trends shape up and die down at a breathtaking pace, you’ll realize that this approach is probably not the wisest one.

You think you’ll always have a job or a project because you specialize in something which is in huge demand, but how long do you want to be at the receiving end of client’s tirades? Wouldn’t you want flexible hours, remote work, or professional clients for a change who know what they want?

Wouldn’t you want to 1-up your game from an 80k job to a 150k+ profile?

That’s where your ré­su­mé comes in.

Believe us, we’ve seen how that single piece of a document has changed people’s lives — the individual remains the same, with his certifications, qualifications, previous profiles and what not, but just revamping everything about that individual on paper suddenly transforms the person himself.

We’ve seen it because we’ve done it.

And if the demand for web developers is there, you don’t think you’re the only one who noticed that, right? For every project that you willingly drop or miss, you’ll find ten developers who will pick it up before it even hits the ground. You have a fair idea of the cutthroat competition which is out there, but continue reading and you’ll find out that the competition is not even the tip of the iceberg. The actual recruitment process and the role which a ré­su­mé plays in it might be an eye-opener for you.

Which is why, without further ado, let’s dive in.

2. Re­su­mé Format: Sorting Out The Key Elements Of A Web Developer Ré­su­mé

Broadly speaking, your web developer ré­su­mé will contain the following sections:

  • Contact info
  • Professional Summary
  • Key Skills (Technical + Managerial)
  • Professional Experience
  • Education
  • Projects
  • Extra: Social profiles
  • Interests, Hobbies, Extra-curricular achievements (Optional).

How do you arrange all these sections? What’s the order that you are supposed to follow? Are all of these sections necessary?

That’s where understanding ré­su­mé layouts and formats becomes important.

A ré­su­mé is either Reverse-Chronological, Functional or Hybrid.

2.1 Reverse-chronological

As the name suggests, it starts off by listing your current or last-held profile and continues from there until you reach the part about your ‘Education.’

  • It’s ATS-friendly (more on ATS below) and allows you to emphasize upon your current work profile and achievements. It’s easy to create and is considered to be the standard format for most ré­su­més.
  • The only downside is that in case you are a frequent job-switcher, it might look bad on paper. There’s no way to hide career gaps in a reverse-chronological ré­su­mé.

Below is an example of the same.

Format for a ‘reverse-chronological’ ré­su­mé. (Large preview) 2.2 Functional Ré­su­més

It only lists the companies where you worked at without diving into the details of your actual work profile. Instead, you create a separate section in which you group all your points under relevant skills.

It can be used by people to hide gaps in their career trajectory, but we aren’t fans of this format, simply because you can merely disguise your gaps but sooner or later, it’s bound to show up. It’s always better to be honest, always.

Here’s an example of a functional ré­su­mé. If you’ll notice, it doesn’t allow the recruiter to see your career trajectory or how you evolved to reach where you are.

Format for a ‘functional’ ré­su­mé. (Large preview) 2.3 Hybrid (Combination) Ré­su­més

This format is exactly similar to the reverse-chronological format apart from the fact that in the ‘Professional Experience’ section, the points are grouped by the sills that they represent.

A format like this allows the recruiter to scan relevant points only based on the skills they are looking for. If you can customize your ré­su­mé to the job description, you can direct the attention of the recruiter to where you want. This is the biggest advantage of using this ré­su­mé format.

Another subset of ‘hybrid’ ré­su­més is where you extract all your achievements and create a separate section of ‘Summary of Skills.’ This allows you to create a highly targeted ré­su­mé, focussing only on the skills which you want to showcase to the recruiter.

You’ll find examples of both down below.

Format for a combination (hybrid) ré­su­mé. (Large preview) Combination ré­su­mé containing an additional ‘Summary of Skills.’ (Large preview) 3. Professional Summary

We encountered innumerable people who spent countless hours and days polishing their ‘Ré­su­mé Objective’ section. Are you also one of them?

What is the difference between the Professional Summary and ré­su­mé Objective section? We like to misappropriate a JFK quote to answer all queries regarding this conundrum:

Ask not what the company can do for you, but what you can do for the company.

Meet Vanessa. She’s the Head Recruiter at a top-notch IT firm and is now looking for an awesome web developer. Her email is flooded with ré­su­més and they all look the same. She’s tired of seeing people listing out what they want — it looks more like a shopping list than a professional ré­su­mé. Surprisingly, all of them are ‘hard-working’ and possess ‘excellent communication skills’ and are ‘looking for a challenging leadership position’.

— yawn —

Then she opens your ré­su­mé which contains a crisp 4-5 line summary detailing your skills and how you plan to apply those skills for achieving organizational goals. You did your research where you identified high-priority needs of the company, and you’ve mentioned how you plan to address them through the skills that you possess.

She sits up and stops thinking about Game of Thrones for a second. She’s hooked and now wants to meet you in person.

Mission accomplished.

Let us clarify that through an example. Check out a couple of professional summaries and try to see which one delivers greater impact.

I’m a 4 years experienced Web Developer specializing in front-end who’s skilled in ASP.NET, Javascript, C++, HTML, CSS, PHP & MySQL. I am looking for the position of a web developer in a company which will utilize my excellent team management and communication skills.

Technically, there’s nothing wrong with this, just like technically there was nothing wrong with the Star Wars prequels. Now check this out:

5+ years experienced, dynamic and detail-oriented Full Stack Web Developer with a track record of spearheading teams to engineer user-centric solutions for achieving breakthrough efficiency and driving client satisfaction. Highly skilled in end-to-end SDLC and effectively prototyped 20+ product features annually for XYZ to achieve a 25% reduction in costs. Registered unparalleled customer satisfaction levels and received the 2017 Employee of the Year Award for achieving a record-breaking NPS score out of 300+ employees.

See the difference? If you’ll notice, the summary doesn’t include a detailed list of his technical proficiency. It’s better to reserve that for a separate Technical Skills section. The Summary is there to give a bird’s-eye view of your professional career and should be a reason for the recruiter to continue with the rest of your Ré­su­mé.

Additionally, in the first example, the summary ended with an ‘Objective’ statement which serves no purpose to the recruiter. But highlighting your achievements (in the second example) will make the reader pause...and if you manage to do that, congratulations — you are already one step ahead of a majority of applicants out there.

Are you wondering what the kind of professional summary listed above is a bit unreal? What if you are an entry-level Web Developer with no concrete achievement to boast of? What do you do then?

In that scenario, and only in that scenario, in the absence of any significant work experience, you can go for an Objective section in case of a Professional Summary. And there can be multiple ways of approaching the same.

Goal-oriented Web Developer with a Bachelor's degree in Computer Science and looking to enhance my professional experience with an IT company specializing in web development. Armed with a deep sense of responsibility and possessing very high levels of enthusiasm to give my 110% for any endeavor.

Desperate much?

Right off the bat, it’s always better if the entire ré­su­mé is in third-person — that means no references to ‘I’, ‘me’ or ‘mine.’ It’s always ‘possessing a track record,’ not ‘I possess a track record.’

Additionally, the above summary doesn’t inspire confidence. You can be a fresher and also sound professional without looking like you’ll die of starvation if you don’t get the job. Here’s how:

Dynamic and detail-oriented Web Developer with a knack for conceptualizing and delivering elegant, user-friendly solutions effectively and efficiently. Possesses a track record of developing an e-commerce mobile app, a CRM online portal and a fully-functional website for a nonprofit working with underprivileged children. Armed with an extensive understanding of end-to-end SDLC and cloud computing. Regular participant and organizer of local hackathons and web developer meetups.

This only shows that you don’t need extensive experience with high-end corporates to make a killer professional summary. You only need to understand the motivations of the recruiter who’s hiring.

4. Technical Skills

Like mentioned earlier, for a technical ré­su­mé like that of a web developer, it’s better to reserve a separate section for all your technical expertise. But even in that scenario, there are ways in which you can optimize the space available to deliver greater impact.

Most web developer ré­su­més that we see usually give a long list of their technical proficiency. In their quest to make the list comprehensive and all-inclusive, they often compromise on readability. Let us clarify that through an example:

Jenkins Maven OOJS CiCd Docker Angular 4 Apache Tomcat 6 Bitbucket Git Jira Chrome developer tools HTML5 Kendo UI BootStrap Mozilla Firebug (debugger) CSS3.0 MySQL JQuery AJAX JavaScript PHP

A layman would think that the skills are all neatly arranged — surely there’s no other way to make it even better, is there?

Well, as a matter of fact, there is. In case of any dilemmas, it’s always better to place yourself in the shoes of the recruiter and come up with ways to make the job of evaluating you even easier.

While there’s nothing wrong with the way the skills are mentioned above, there’s another way through which you can present the same information and make it look even more relevant.

Web Technologies & Frameworks: Angular 4, HTML5, CSS3.0, Kendo UI, PHP

Scripts/UI: JavaScript, OOJS, JQuery, AJAX, BootStrap

Database and ORM: MySQL

Web Debug Tools: Mozilla Firebug (debugger), Chrome developer tools

Application/Web Server: Apache Tomcat 6

Versioning and other tools: Git, Bitbucket, Jira

Deployment Tools: Docker, Maven, CiCd, Jenkins

Boom!

By merely assigning sub-headings to the skills that you possess, you made the recruiter’s job easier. Now she only has to scan the sub-headings to quickly find if what she’s looking for is there in your ré­su­mé or not.

5. Managerial Skills

Many web developers stop at ‘Technical Skills’ and continue with their ‘Professional Experience.’ True, for a tech profile, technical skills play a major role and acts as a foundation for whether or not you’ll be shortlisted or not.

But remember when we talked about the difference between an 80k profile where you are dealing with nonsense clients and a 180k+ profile with flexible hours? The ‘Key Skills’ section containing your managerial and leadership skills will play a critical role in bridging that gap. Web developers are a dime a dozen — from a recruiter’s perspective; it’s cheaper to just hire a freelancer for their development work, if that’s what they are looking for.

But they are not, are they? They are looking for a full-time profile. What do you think would be the difference between the two?

Ownership. Leadership.

Companies aren’t just looking for a robot who can be programmed to do basic tasks. They are looking for future leaders who can take over a few years down the line. And it’s your task to convince the recruiter that you are such an individual. Any freelancer working on an hourly basis will possess the technical skills that you do. But it’s your leadership and managerial skills that will help you make it.

Coming to your non-technical skills, it’s always better if you prioritize hard, professional skills over soft skills like ‘communication’ and ‘self-motivation.’ Why? Simply because there’s no way to prove or quantify the same. But you can always add skills like ‘Issue Resolution,’ ‘Leadership’ or ‘Project Management’ and then proceed with showcasing the same in your ‘Professional Experience’ section.

A simple rule of thumb while mentioning your managerial skills is “Show, Don’t Tell.” It’s always better if you are able to substantiate the skills that you mention with concrete points down below.

Don’t just say that you are a leader. Show that you’ve led teams to achieve departmental goals.

Don’t say that you are good in negotiating. Show how your negotiation skills led an x% reduction in costs.

A few examples of managerial skills which you can include in your ré­su­mé are below.

Front-End Development Agile Methodology Code Optimization Documentation & Reporting Requirement Gathering UI Enhancement Module Management Issue Resolution Stakeholder Management Client Relationship Management Project Management Team Leadership

Mention only those skills which you can elucidate in your ré­su­mé. There’s no point in adding a random list of skills which you’ll find insanely difficult to justify at the time of your interview.

How do you identify all those managerial skills which are relevant?

The ‘Job Description.’ That is your Bible for your entire ré­su­mé writing process.

Look for non-technical skills (both managerial and soft skills) and see if they can be included. Only add them if you think you can justify them, either in points below or at the time of your interview. Nothing will hurt your chances more badly than blatantly lying on your Ré­su­mé.

6. Professional Experience

How do you go about framing points for your ré­su­mé?

The ‘Professional Experience’ section is going to be the most critical section of your ré­su­mé. It’s the fuel of your car — the body and looks are alright, but the car won’t move an inch without juice. This section is that juice for your ré­su­mé.

A handy resource for you would be the ‘Job Description.’ Your task is to align the entire ré­su­mé along the lines of what the recruiter is looking for. Your ré­su­mé should look like it’s in response to the JD, that you possess the ability to resolve all the issues which are inherently mentioned in that document.

6.1 Master CV

A better (but tiring) way to proceed would be to make a MasterCV first. It’s a time-consuming process, but we can guarantee that it’s going to give you rich dividends for the rest of your jolly professional career.

We are assuming that you never actually got a chance to sit down with your ré­su­mé, to look at it and figure out what’s wrong with it and how it can be better. And it’s perfectly alright if that’s the case. Most people have that attitude when it comes to their ré­su­mé. It’s always a last-minute rush, which means that there’s almost always something that you’ll inevitably miss, that there’s always a chance that it can be made better.

MasterCV is how you avoid that situation, it’s an important piece in getting you that 150k+ profile. It’s basically a list of literally everything that you have ever done till date. And we mean everything.

A masterCV is for your own use. No one is going to see it. There’s no need to structure it or keep it to two pages — it can be a 10-page long list of bullet points consisting of every achievement (curricular, extra-curricular, professional, achievements around your hobbies or interests — you name it) in your entire life, or it can be full of deathly long paragraphs. The idea is to keep a single document containing all your achievements till date, and regularly updating it.

What do you think happens when you update your ré­su­mé in a last-minute rush? You only add those points which you are able to recollect at that moment. But if you think about it, your tenure at any organization must be filled with tiny milestones and achievements (i.e. milestones which get missed out when you update your ré­su­mé in a rush).

Once you have your masterCV ready, take out the JD of the profile that you are targeting and scan your masterCV for points which can be interpreted and rephrased along the lines of what the recruiter is looking for. The idea is to customize your ré­su­mé according to the job, and not send a standard ré­su­mé for any and all profiles that you come across.

As you continue to update your masterCV, years down the line when you’ll be applying for something else, you can again come back to that same document and pick out points for tailoring your ré­su­mé to that new profile.

6.2 Cause-Effect Relationship: The Princeton Formula To Rule Them All

Another thing to keep in mind is the cause-effect relationship. Most people find themselves at a loss when it comes to filling out actual points for the job which they were doing. They know what they did, but they can’t write it down in coherent points. When that happens, they resort to a typical JD for jobs like the one they themselves were doing, and then morph those points into their own ré­su­mé.

A fundamental thing which is wrong with this approach is that a typical JD is responsibility-based, while your ré­su­mé should be achievement-based. A JD contains a list of things which the recruiter expects a candidate should be capable of, while your ré­su­mé will contain your achievements around those responsibilities. There’s a stark difference.

The good thing is that a vast majority of applicants resort to this approach. So a tiny deviation from this well-treaded path will automatically elevate your chances of getting shortlisted.

How do you do that? By making sure that there’s a coherent cause-effect relationship in each point. A foolproof way to make sure that you are able to do that is the Princeton formula along the lines of:

A + P + R = A

Action Verb + Project + Result = Accomplishment

If you are able to incorporate the essence of this formula in all your ré­su­mé points, trust us, 99% of your job is done.

Most applicants either mention their responsibilities or their achievements. But this formula ensures that not only you mention these two parameters; you also detail the quantifiable impact of your achievements. Instead of wrapping your achievements around your profile, showcase the impact that you achievement had on the organization. When you do that, you instantly enhance your role from someone who just did what they were told, to someone who took ownership of their responsibilities and delivered an impact at the macro level.

An example of the Princeton formula in action:

Spearheaded a team of 5 Junior Developers to effectively execute 11 projects with 100% on-time delivery while achieving a cost-reduction of 20% and registering CSAT levels of 4.88/5.00

This point is so much better than a generic point along the lines of:

Worked on various projects to decrease costs and achieve client satisfaction.

A point like this clearly highlights the quantifiable impact that you were able to achieve. Beginning a point with an action/power verb (a list of which you can find in the Princeton document linked above, or you can simply google the same) instantly magnifies the impact of that point, as opposed to most other candidates who often tend to ‘manage’ everything.

That’s the kind of point which makes the recruiter pause, and believe us, when a Hiring Manager is going through dozens of ré­su­més on a daily basis, it’s a superhuman task to make her pause and look at your ré­su­mé. Your task is to do just that, and that’s how you do it.

6.3 Bucketing/Subheadings

Another critical weapon in your arsenal to make a stellar Developer ré­su­mé is bucketing, or sub-headings.

Merely framing immaculate points will only get you so far. Let’s say you picked apart your entire experience in your previous profile and came up with this:

  • Developing client-side libraries across both iOS and Android to enable usage of the offline sync feature for the app developer,
  • Envisioned & developed the common network layer for Android to accomplish a reduction in the SDK size by ~20%,
  • Commissioning the development of Logging Framework across all platforms including iOS, Android & Windows,
  • Achieved the ‘Team Excellence Award’ & played a critical role in applying for a patent based on the logging library,
  • Conceptualizing and developing a library for the company to reduce additional costs involved in using third-party libraries,
  • Spearheading a team of ~20 to conceptualize and effectively implement the Mark for Upload feature for the company,
  • Proposing a common network layer for all network calls to be used by the product to effectively optimize SDK size.

Sure, in their individual capacity, the points are meticulously framed and seem to follow the Princeton formula uniformly. But the entire work experience itself looks like a wall of text which will make the recruiter groan the moment she sees it. You don’t want that, do you?

Now look what happens when we take the same points and work our magic to make it a breeze for the recruiter, without changing a thing about the points themselves:

Team Management & Leadership

  • Spearheading a team of ~20 to conceptualize and effectively implement the Mark for Upload feature for the company
  • Commissioning the development of Logging Framework across all platforms including iOS, Android & Windows.

Library Management & Process Optimization

  • Conceptualizing and developing a library for the company to reduce additional costs involved in using third-party libraries
  • Developing client-side libraries across both iOS and Android to enable usage of the offline sync feature for the app developer
  • Proposing a common network layer for all network calls to be used by the product to effectively optimize SDK size.

Key Achievements

  • Envisioned & developed the common network layer for Android to accomplish a reduction in the SDK size by ~20%
  • Achieved the ‘Team Excellence Award’ & played a critical role in applying for a patent based on the logging library.

If that isn’t mic-drop stuff, we don’t know what is.

In a single instant, you transformed the entire professional experience by neatly arranging all the points into buckets or sub-headings. Consequently, the recruiter won’t have to go through the individual points — merely perusing through the buckets will serve the purpose. And to further sweeten the deal, you bolded relevant words and phrases to make the recruiter’s job even easier? That’s what you want, isn’t it? If you make the recruiter’s job easier, she’ll surely return the favor.

6.4 Professional Experience Section for an Entry-level Web Developer

But again, does the above point look a bit unreal? What do you do if you are a fresher with no significant professional experience to mention?

Believe us, possessing years of work experience is not the only way to showcase that you’ll be fit for the job. More than the achievement itself, if you are able to demonstrate that you have the right attitude, your job is done.

So how do you phrase your professional experience in a way that will make you stand in comparison to a Developer armed with a few years of experience?

  • Include projects for which you freelanced in your career till date,
  • Bolster your Github profile and code that you’ve posted there,
  • Include all open-source projects you have contributed to,
  • Mention any hackathons or local developer meetups in which you participated or helped organize.

PRO-TIP: If you are looking for a short-term solution to beef up your entry-level web developer ré­su­mé, just look up for some open-source projects online. You’ll find hundreds of projects to which you can contribute, so you can incorporate the same on your ré­su­mé.

Meet Chad, an entry-level web developer looking for a high-end profile. After hours of deliberations and brainstorming, this is what he came up with:

Entry-level web developer possessing a BA Degree in Computer Science and armed with an eager-to-learn approach where I can deploy my excellent development skills.

— yawning continues —

Since you know that you only get one shot at the profile of your dreams, why would you sabotage your chances if you can do this instead:

FREELANCE PROJECTS:
  • Developed a webapp portal for an e-travel firm to increase the client’s sales by 48%,
  • Enabled the Smiles Dental Clinic to measure patient satisfaction scores through an online form. Assisted in boosting CSAT levels by 7 points within 2 months,
  • Independently developed a website for the local Baseball league championship to increase streaming sales by 50%,
  • Created a webapp to facilitate easy donations through Facebook & Whatsapp for Friendicoes Shelter for the Homeless. Raised donation levels by 45% & helped rehabilitate 25 people from the street.

That’s Vincent. He knew he was stuck in a vicious cycle wherein he needed work experience to gain work experience. So he took matters in his own hands and scouted the digital space for any and every project that he could find. Within a span of 4 months, he executed 4 such projects, strengthened his ré­su­mé to make it at par with a professional developer, and is now leading a team of his own at a top-notch firm.

7. Education Section In A Web Developer Ré­su­mé

This section is often underrated by most developers. Shouldn’t the professional experience and projects be the focus on your ré­su­mé?

Yes. But that doesn’t mean you can scribble your educational qualifications on the back of a napkin and staple it on your ré­su­mé.

You can follow the conventional path and include your degree, college, and year of passing.

But remember. You only get one shot at this.

Let us clarify that through an example:

BA — Computer Science
University of Syracuse, ‘16
GPA 3.9

Um. Okay. Again, it’s not technically wrong. But try this:

BA — Computer Science
University of Syracuse, 2013-2016

  • Utilized a deep-rooted passion for cloud technologies by contributing to the open-source AWS Project for New York University
  • Wrote a column on ‘Is AI the Industrial Revolution of the 21st Century’ for the college magazine
  • Developed the Salesforce Contacts mobile app to streamline operations & performed Jasmine Unit Tests in the TDD process
    • Deployed the MVVM Architecture for boosting ability to build scalable apps & optimized usage of Pagination & Sorting

We don’t have to elucidate the differences, do we? The best part is that it’s easily doable. It’s not necessary that your ‘Education’ section should look like that — the points above are just examples. But if you sit down and brainstorm with yourself, you’ll definitely come up with a list of something which you can quantify and incorporate in your ré­su­mé — participation in clubs, internships, freelance projects, college competitions, publications... we can go on really.

8. Technical Projects

If you’ve been following our tips until now, you can include them all to make a brilliant ‘Projects’ section for your web developer ré­su­mé. Combining the Princeton formula with bucketing and bolding, this is what a sample ‘Projects’ section looks like:

A few obvious pointers that this sample highlights are as follows:

  • For every project, include an ‘Environment’ subheading which lists out all the tools and technologies which were deployed for executing that project. If there are a lot, you can categorize them into further classes (like we did with the ‘Technical Skills’ section).
  • A description of the company/client helps put the project in perspective. The idea is to showcase to the recruiter that you were working for a reputed company. You can include figures around number of employees, revenue, etc. to make sure it comes out like that.
  • Industry standards dictate the location and time period to be aligned to the right, with the company and project title aligned to the left.
  • Adding buckets or subheadings is an effective way to incorporate the skills and methodologies which the recruiter is looking for. You can scan the ‘Job Description’ for skills which the recruiter is targeting and phrase your points to ensure that the bucket (which goes on top of the points, meaning greater visibility) includes those skills.
  • Try to reserve a separate ‘Key Achievements’ section for as many projects as you possibly can, with quantifiable impact to showcase the depth of your contribution.
Key Projects section for the ré­su­mé of a Web Developer. (Large preview) 9. Additional Sections In The Web Developer Ré­su­mé

To deliver the Oomph!-factor to your ré­su­mé, there are additional sections which you can incorporate. Recruiters know the cost of any hiring decision, and they know that if you are on-boarded, you’ll spend a greater part of your day with other team members. It’s important for them to know that you’ll gel along with the team — that’s where these additional sections come in.

You can include sections on ‘Extra-curricular Activities’, ‘Awards & Recognition’, ‘Hobbies/Interests’, and so on. It’s important to stay relevant even when you are working on these sections. Just saying you like to travel or play football won’t add any value to your ré­su­mé. Instead, quantifying your hobbies/interests will go a long way in ensuring that.

Web developers, in particular, can include their social profiles. This is a great guide containing sample developer portfolios that will inspire you to polish your own. A well-maintained Github profile, for instance, will signify that you are not a developer just because you have a degree — it means that you actually like your job and find it engaging enough to do in your free time as well.

This is a sample ‘Hobbies’ section, for instance, the likes of which we see a lot on a daily basis:

HOBBIES
Reading, travel, photography

Surprisingly, a vast majority of applicants will have a ‘Hobbies’ section like this. This tells the recruiter nothing.

Now, check this out:

HOBBIES
  • Convener of monthly meetings of the Webber Society of California, with 800+ members in CA and 10,000+ pan US
  • Photography: Owner and administrator of the Free Smiles Photography Page on Facebook with 7k+ likes
  • Travelled to 7 countries in the last 12 months and documented the same on my travel blog (insert link)

Maybe you don’t own a photography page with 7k+ likes, and that’s okay. The idea is to quantify even your hobbies and interests, to give an idea to the recruiter as to what that hobby means to you. Most recruiters look for people who can have a life outside of the workplace and can maintain a healthy work-life balance. If you can’t elaborate on your hobbies or interests, better to avoid that section altogether than to include it and make it look like you just wanted to fill up space.

A ‘Portfolio’ section will do wonders for your ré­su­mé. You can find projects online which would only take a couple of hours — adding something like that on your ré­su­mé will instantly boost its value. You can’t attach a million lines of code in an Appendix to your ré­su­mé to tell the recruiter that you like to code. But a healthy portfolio containing a list of happy clients and projects successfully executed will bolster your profile.

10. ATS Optimization

Ah. The dreaded ATS. You might have only heard rumors or sordid tales of it, but what exactly is the ATS?

If you’re the Head Recruiter of an MNC that receives thousands of applications on a daily basis, what are your options? To personally go through all of the ré­su­més? To hire a team the size of Denmark and have them scan ré­su­més 24/7? Or, you know, get a software to do the job for you?

Applicant Tracking Systems work a keyword matching algorithm, wherein the software matches the ré­su­mé with the keywords present in the job description. Remember that one time when you sent a ré­su­mé to a company and never heard from them? Did you curse the recruiter after that, wondering why they couldn’t bother to send a standard rejection mail? Have you considered the fact that maybe no human recruiter actually got a chance to scan your ré­su­mé? What if your ré­su­mé was rejected by the ATS even before it landed on a human’s desk?

That happens more often than you think. The solution to that isn’t stuffing your ré­su­mé with keywords. Your task isn’t to beat the ATS alone — even if your ré­su­mé is parsed by the ATS, the recruiter will take one look and trash it even before you get a chance to blink.

This is a great tool to match your ré­su­mé with the JD which you are targeting. It will give you an ATS score depending on how many relevant keywords you used in the ré­su­mé against the JD. Moreover, it will give you a list of keywords which you can include to increase your score. A lot depends on which particular ATS that the company is using. Also, remember that the ATS, at the end of the day, is operated by a human recruiter. You can only guess which keyword the recruiter will look up on the ATS, but you can cater to as many keywords as you possibly can. just to be sure.

Scan the JD to get a list of keywords which are important to the company; additionally, you can paste the entire JD in a word cloud which analyses the frequency of words used in a text. Incorporate those keywords in an organic manner without making it look like you are being blatant about it.

Reminder: ATS is just a step in the entire recruitment process. You shouldn’t compromise meaning or authenticity at the cost of ATS optimization. It would be futile if the ATS is able to parse your ré­su­mé but the recruiter sitting behind a desk thinks the ré­su­mé itself was written by a machine.

11. Key Takeaways

To recap a few critical points that we touched above:

  • A reverse-chronological ré­su­mé format is your best best. A functional or a hybrid (combination) ré­su­mé is not the best way to showcase your achievements with context and impact. A reverse-chronological ré­su­mé showcases your trajectory which gives a bird’s-eye view of your career till date.
  • In case you are not an entry-level developer, go for a professional Summary section instead of an Objective section.
  • Divide your skills into Technical and Managerial Skills. Group all your technical skills under relevant sub-headings to make the job of the recruiter (who will be a generalist and not a ‘techie’) easier. Prioritize professional skills (hard skills) over soft skills and try to elucidate the skills that you have mentioned in your ‘Professional Experience’ section.
  • A MasterCV is the ideal way if you want to break down your job-hunting process into something much more manageable — not just for your immediate requirements but for the long run.

    Having a master document containing all your achievements till date will allow you to customize your job application, instead of sending a generic ré­su­mé for all vacancies.

    And tailoring your ré­su­mé to the job application is how you beat a majority of other applicants.

  • Keep the Princeton formula in mind (Action Verb + Project + Result = Accomplishment) while you are framing points under the ‘Professional Experience’ section. This allows you to establish a cause-effect relationship which can transform your entire application.
  • Bolding and Bucketing (sub-headings) in your work-ex section will make sure you pass the 6-second test. You can use it to only highlight those achievements which you want the recruiters to notice before they dive down into your actual ré­su­mé.
  • Go for additional sections (Hobbies, Interests, etc.) only if you think it will bolster your application, or if you can provide substantial details around the same.
  • Once you are done, check the ATS score of your ré­su­mé against the job description for the profile which you are targeting to identify gaps and areas of improvement.
12. A Sample Ré­su­mé To Get You Started

Still have more doubts around the ré­su­mé-writing process? Want to share your experience of making your ré­su­mé or the job-hunt in general? Give us a shout-out in the comments and we’ll get back to you!

A complete sample ré­su­mé for a web developer (Large preview) (ra, yk, il)
Categories: Web Design

How Mobile Web Design Affects Local Search (And What To Do About It)

Thu, 06/28/2018 - 05:30
How Mobile Web Design Affects Local Search (And What To Do About It) How Mobile Web Design Affects Local Search (And What To Do About It) Suzanna Scacca 2018-06-28T14:30:06+02:00 2018-07-11T12:36:25+00:00

As mobile-first takes center stage in the majority of articles I write these days, I’ve had a number of designers and developers question why that is. Sure, Google has made a big push for it, so it’s smart to do what Google tells you. But, for some websites, the majority of traffic doesn’t come from mobile users.

At the moment, there are certain websites that happen to receive more mobile traffic than others, and a lot of it boils down to location. As Google explains it:

“Looking for something nearby—a coffee shop, noodle restaurant, shoe store—is one of the most common searches we do. In fact, nearly one-third of all mobile searches are related to location.”

Logically, it makes sense. If a user has access to a desktop or laptop at home or work, they’re more likely to use it to initiate a search. Whether they’re multitasking (like while coordinating dinner with a friend through Skype), walking around a city, or decide to order dinner in but don’t want to move from the couch, the mobile device is a quick way to get that information.

In this article, I’m going to focus explicitly on these kinds of consumers and the websites that appeal to them. In other words, if you design websites for businesses with a local presence, keep reading to learn how to use mobile web design to improve their local search ranking.

Getting the process just right ain't an easy task. That's why we've set up 'this-is-how-I-work'-sessions — with smart cookies sharing what works really well for them. A part of the Smashing Membership, of course.

Explore features → Seven Mobile Web Design Strategies To Use For Local Search

In last year’s Local Consumer Review survey, Bright Local revealed that 97% of consumers had used the Internet to search for local businesses at some point in 2017. For some users, the Internet was frequently used as a resource, with 12% looking for new businesses every day and 29% doing so at least once a week.

A breakdown of how frequently people search for local businesses online. (Image source) (Large preview)

A report by hitwise shows that the majority of online searches begin on mobile:

Industries whose users most commonly begin their searches for on mobile. (Image source) (Large preview)

Notice the trend in business types whose users most often begin their searches on mobile (i.e. they’re mostly local businesses).

Further, it appears that these kinds of searches are done for the purposes of research at the start of the buyer’s journey. If web designers and developers can get into the minds of their target users and the kinds of questions they might ask or features they might seek out, they can more effectively build a relevant mobile experience through their sites.

For those of you who specialize in building websites for clients with a local user base, you should utilize mobile design strategies that improve local search results. While some of your efforts outside the website will help with this (like creating a Google My Business page and responding to reviews on Yelp), there’s a lot that can be done with your design to greatly contribute to this as well.

Strategy 1: “Design” Your Metadata For Mobile

Copywriters and web developers are already aware of what a critical role metadata plays in a website’s search marketing efforts. In just a few succinct strings of text, you can tell search engines and your audience a lot about your website and each of its web pages. This is particularly helpful in local search as users look for results that answer the “[fill in the blank] near me” question.

But that’s not the strategy I’m talking about here. Instead, I want to focus on how you can “design” your metadata so that it’s more attractive to mobile users once your website actually appears in their local search results.

There are a couple ways to do this:

The first is to craft succinct metadata strings for each web page. Let’s take the Liquid Surf Shop website, for instance:

Refer to the first search result for Liquid Surf Shop. Notice how succinctly it’s written. (Image source) (Large preview)

The first search result looks nice, doesn’t it? The web page name and URL each fit on one line. The description accurately describes what the shop does (and points out where it’s located!) while also fitting within the allotted space for mobile search descriptions.

Now, take a closer look at the Liquid Surf Shop when it’s compared against direct competitors in mobile search:

Liquid Surf Shop’s metadata is well-written and to the point. (Image source) (Large preview)

If you look at the entries for East of Maui and Dewey Beach Surf Shop above, notice how their descriptions end with an incomplete sentence. Then, look at the Bethany Surf Shop below it. The meta title is way too long for the space given. This lack of attention to metadata might cost these websites visitors when positioned around a well-written listing like the one at the Liquid Surf Shop.

Another thing you can do to improve local search listing appearance (as well as how high it ranks on the page) is to use schema markup in your design’s code.

Schema.org has created a robust set of structured data that businesses can use to improve search engine comprehension and, consequently, results. Local businesses, in particular, would find schema markup especially helpful as it allows them to “tag” various elements consumers tend to use in the decision-making process.

Here’s an example of schema markup done well for a local business: Henlopen City Oyster House:

Schema markup found for Henlopen City Oyster House home page. (Image source) (Large preview)

As you can see, the developer has marked up the home page with various structured data. Specifically, they have associated it with three “types”: Local Business, Restaurant, and Service. Each of those schema types have been drilled down even further into details about the location, contacting the restaurant, cuisine type, and so on. This is great for connecting mobile users to the kind of local business they seek out.

Strategy 2: Shorten The Website

With some mobile websites, it may be okay to ask users to scroll four or five times before they reach the end of the page. Or to go two or three pages deep to get to a desired endpoint.

That said, that type of extended on-site experience probably isn’t ideal for local mobile users. While Google does pay attention to factors like time-on-site and pages visited, what you need to be more concerned with is high bounce rates and lack of engagements or conversions.

In order to create this ideal situation for users while still appeasing the search gods, your focus when designing a website and its navigation is to keep it short and to the point.

I’m going to use the Bad Hair Day website for this example:

This is the first thing you see upon entering the Bad Hair Day website. (Image source) (Large preview)

The header of the website contains all the information someone might realistically need if they want to contact the hair salon and spa. The address is there along with a phone number (which does have a click-to-call function) and social media icons.

Other types of websites would do well to put business-specific information and calls-to-action here as well. For example:

  • Location search
  • Hours of operation
  • Make an appointment or reservation
  • View a menu (for food)

…and so on.

The simplified navigation menu for the Bad Hair Day website. (Image source) (Large preview)

Scroll just a little bit down the website and you can open the hamburger menu. As you can see, this navigation is simply structured and keeps all the essentials on the top level for easy discovery.

One more scroll on the Bad Hair Day site takes you to this informational section. (Image source) (Large preview)

The home page of this mobile website only requires three full swipes before you get to the end of it, which is a truly nice touch. Rather than create an overly elaborate home page with summary sections of each page that force users to scroll and scroll, Bad Hair Day keeps it simple.

By offering such a user-friendly layout and structure, Bad Hair Day has created a truly awesome first impression. In addition, by keeping things simple, the website isn’t burdened by excessive amounts of images, animations, scripts, and so on. Because of this, the mobile site loads quickly.

Strategy 3: Localize Visual Content

If your sites are mostly comprised of large swatches of color and stock photography, this one won’t apply. However, if the designs you create include custom-made photos and videos, there’s a unique opportunity to use this visual content to rank in local search.

If it makes sense, include photos that strongly resonate with local residents. Recognizable images of the local landscape or cityscape will give visitors a reason to feel a stronger connection to the business. It’s kind of like bonding over a local sports team during a consultation call or first meeting. Only, you’re able to make this connection with them through your choice of imagery.

But that’s just how you appeal to visitors’ local ties on the website. How about in search?

For this, use alt text on images and videos. This is typically recommended for the purposes of accessibility (i.e. helping impaired visitors consume your content even if they can’t see or hear it). However, alt text is also readable by Google bots. If you use the right kinds of location-driven keywords in your image’s alternative text, that visual content can rank higher in local image searches. Just keep in mind that you don’t want to sacrifice accessibility for local SEO. Make your alt text descriptive while finding ways to infuse local keywords into it.

One of the local business types I think this is particularly useful for is a real estate agency. Like Jack Lingo Realty. Here is a listing Jack Lingo posted on its website for a home in Rehoboth Beach:

Real estate listing on the Jack Lingo website. (Image source) (Large preview)

The top of the page includes a series of beautiful images taken of the house located at 17 West Side Drive, Rehoboth Beach, Delaware.

Now, open up the page source and look at what the first image’s alt text says:

Example of location-specific alt text used on the Jack Lingo website. (Image source) (Large preview)

The alt text includes a unique identifier at the start of it (probably to distinguish it from the other images in the gallery), but is then followed by the address of the property. For prospective homeowners who do their research via Google for properties in that particular neighborhood and community, well, guess what they find when they do a Google image search for it?

Jack Lingo takes the top spots in local image search. (Image source) (Large preview)

Jack Lingo’s property images take the top spots. Pretty impressive, right? So, the next time you design a website for a client whose business depends on showing off a product or property, think about how you can optimize it for local image results.

Strategy 4: Add Reviews And Ratings When Possible

I always like to refer to the aggregation of reviews and ratings on your own website as a way to control the conversation about your brand. It makes sense, right? When customers are left without a podium to speak from, they’re going to make their own… on Yelp, Google, Facebook, TripAdvisor, and wherever they feel like it. While there’s no escaping this entirely, offering a space for reviews and ratings on your website can help control the flow of feedback.

It also can improve the look of a local search result.

The example I’m going to use for this is the Fairfield Inn & Suites Rehoboth Beach:

The top of the Fairfield Inn & Suites page displays the average user rating as well as number of reviews. (Image source) (Large preview)

As you can imagine, a major hotel property owned by Marriott will already receive a lot of reviews from the web.

An expansion of how users rate the Marriott property, on average. (Image source) (Large preview)

However, by adding reviews and ratings to its own website, Marriott is accomplishing a few things that will help it with local search users. For starters, there’s the transparency factor. Marriott has actively solicited customers for feedback on their hotel stay and published those reviews for all to see. Local users are very fond of online reviews, with 73% claiming that positive reviews increase their trust in a local business.

The Fairfield Inn & Suites listing includes an eye-catching rating. (Image source) (Large preview)

In addition, Marriott’s inclusion of a rating system on its website proves beneficial within local search results, too.

As you can see in the list of results for “Rehoboth beach de lodging”, Marriott is the only one that includes a rating—and an impressive one at that. If mobile users are quickly scrolling through search results for the most relevant and attractive business for their needs, a positive review might be enough to stop them dead in their tracks.

Strategy 5: Build Dedicated Location Pages

When designing websites with multiple locations, be sure to create a dedicated page for each location. There are on-site benefits to think about as well as search-related ones.

For starters, individual location pages reduce the amount of work visitors have to do once they get on the site. You’ve likely seen those “Location” pages before that are cluttered with a dozen or so locations, each with information related to address, phone number, email, website and so on. By giving each location a separate page, however, you don’t have to worry about compromising readability or focus.

The Tanger Outlets website demonstrates this point well as you can see that, in just a few clicks, visitors can quickly learn more about their personal location without the clutter or distraction of all the others.

he Tanger Outlets navigation includes a page dedicated to Locations. (Image source) (Large preview)

The Tanger Outlets navigation menu puts the “Locations” page right at the very top. It’s likely the first thing visitors search for as they aim to learn more about their local outlet mall and its offering of shops and brands.

The “Location” page on the Tanger Outlets site includes an interactive map. Image source) (Large preview)

The “Location” page for the Tanger Outlets website then displays an interactive map. Users can drag the map around and try to find their location on their own or they can enter details below in the short form.

Example of a location-specific page and details from Tanger Outlets. Image source) (Large preview)

Upon finding their location, users then receive a high-level overview of the location, phone number, and hours of operation for the Tanger Outlets near them. There are additional pages they can visit to learn more about stores and deals at that particular mall.

By creating dedicated location pages on your website, you’re also giving it an extra chance to rank within local search results.

Strategy 6: Place Your CTA Front And Center

As you might have noticed, there are common themes running through these strategies: simplicity and straightforwardness. The more quickly you can deliver information to your visitors through smart design techniques, the greater the likelihood they will engage and/or convert.

As it pertains to these key checkpoints, you obviously know what to do about designing call-to-action buttons for mobile: make them big, colorful, clickable, and in the thumb zone. But what about placement? Some argue that a call-to-action should always be placed in the most logical of locations. In many cases, that’s directly after a descriptive section of text that “sells” visitors on the reason for clicking through.

On mobile, you don’t really have time to waste. And if they’re doing a search explicitly looking for a local business that does X, Y or Z, then it would be beneficial to put your CTA front and center.

The Atlantic Oceanside is an extreme example of how to do this, but it’s one I believe is done well all the same:

The top of the Atlantic Oceanside page displays a “Book Now” button. (Image source) (Large preview)

The very top of the Atlantic Oceanside website is a prominent “Book Now” button. Granted, some users might not be ready to pull the trigger on a hotel reservation the second they enter the site, but it’s still a good idea to have the button there. It’s a reminder that the booking process is going to be as painless as possible.

The “Book Now” button appears a number of times throughout the Atlantic Oceanside website. (Image source) (Large preview)

For visitors who aren’t ready to book right away, the website includes the same CTA throughout the rest of the site. It’s consistently designed and worded so that visitors always know where to find it.

The Atlantic Oceanside site also includes the CTA in the navigation. (Image source) (Large preview)

There’s another instance of the CTA that I think is placed quite well and that’s the one that exists in the navigation. You can see that all the important details about a guest’s stay are presented first, but then “Book Now” and the business’s phone number are at the bottom of the list so users don’t have to dig through pages to find that information.

If you want to make conversions easier for mobile users, don’t bury your CTAs.

Strategy 7: Include Geotargeting Features

The last strategy I’m recommending is less about design and more about features you can apply to your site that give visitors a personalized experience.

Geotargeting and geolocation services (like beacon technology) were really hot topics a few years ago. Think back to when Pokémon Go was all anyone could talk about. Mobile users were willingly giving apps their location data in return for what they considered to be a valuable experience. I believe you should be doing the same when designing mobile websites for local search users.

With geotargeting features, you have the opportunity to enhance visitors’ experience in a way that a global-serving website can’t.

WSFS Bank is an example of a business that makes good use of this feature. First, it asks for permission to use the current location as determined by the user’s mobile device:

WSFS Bank politely asks visitors for access to geolocation data. (Image source) (Large preview)

Upon granting access to the mobile website, the user is then presented with information at the top regarding the closest WSFS Bank location:

A sticky top bar is now presented to the mobile user on the WSFS Bank website. (Image source) (Large preview)

There are other use cases for geotargeting that your visitors might find useful as well. For instance, you could offer targeted discounts, include in-store availability checks, and convert prices to their local currency (if not the same as your own). Ultimately, your access to their location should be used to improve their experience and compel them to convert online or visit the brick-and-mortar location.

Wrapping Up

Designing for mobile-first isn’t all too tricky these days now that we’ve had time to adjust to it. That said, designing mobile websites for local search users is a different story. It’s not that they don’t appreciate a responsive design or shorter contact forms like everyone else. It’s just that their motivation and goals aren’t always the same as everyone else’s.

So, in addition to designing websites for mobile-first indexing, pay attention to how the design affects the website’s appearance in search results as well as how it’s received by local search users.

(lf, ra, il)
Categories: Web Design

Everything You Need To Know About Transactional Email But Didn’t Know To Ask

Wed, 06/27/2018 - 03:30
Everything You Need To Know About Transactional Email But Didn’t Know To Ask Everything You Need To Know About Transactional Email But Didn’t Know To Ask Garrett Dimon 2018-06-27T12:30:49+02:00 2018-07-11T12:36:25+00:00

Any application with user-authentication can’t exist without email, yet, email doesn’t always get the attention it deserves. With modern email service providers, it’s easier than ever to create a first-class transactional email experience for your users, but, for most of us, the challenge lies in the fact that you don’t know what you don’t know. We’re going to dive into an end-to-end analysis of everything you need to bring your transactional email up-to-snuff with the rest of your web application.

We’ll address the difference between transactional and bulk emails and how and why to use email authentication. We’ll also talk about handling delivery edge cases gracefully, crafting great email content, and the key pieces of infrastructure you’ll want in place for sending email and monitoring delivery. Then you’ll be well on your way to being a transactional email pro in no time.

The Challenges Of Transactional Email

To some degree, email has traditionally been a second-class citizen because it’s more difficult to monitor and understand how well you’re doing. With your application, there are countless performance monitoring tools to provide insights into front-end, back-end, database, errors, and much more. With email, the tools are less well-known and a little more difficult to use effectively. So let’s explore some of the challenges facing email monitoring and reporting, and then we can look at the available tools and tactics that can work within the challenges and constraints to give you a more informed view of your transactional email.

Getting the process just right ain't an easy task. That's why we've set up 'this-is-how-I-work'-sessions — with smart cookies sharing what works really well for them. A part of the Smashing Membership, of course.

Explore features →

The biggest underlying challenge with monitoring email is that it’s literally impossible to log in to every recipient’s inbox and check to see if they received the email. So right out off the gate, the best insights we can hope for are simply proxies or estimations of performance. The second biggest challenge is that every ISP plays by their own rules. What might get classified as spam by Outlook could go straight to the inbox in Gmail. And inbox providers can’t share their “secret sauce” because it would immediately be exploited by spammers. So what’s a developer to do?

Open rates can give you a rough approximation, but since they rely on tracking pixels, which can easily be blocked, it’s an incomplete picture. Inbox rates and delivery speeds can’t be directly measured either. So you’d have to settle for sending regular tests to seed accounts that you have the ability to test. These aren’t perfect, but it’s the best available proxy for understanding delivery to the various inbox providers. We’ll address tools help automate this later in the guide.

Adding domain authentication in the form of DKIM, SPF, and DMARC can be difficult and confusing, or, depending on the size of your company, getting access or approval for DNS changes can be cumbersome or impossible. Even then, it’s incredibly easy to get the DNS entries incorrect. If you’re not familiar with domain authentication, don’t worry, we’ll address it in-depth later.

Of course, even if you’re generally able to achieve great delivery, bounce handling introduces more variability to delivery. Recipient’s inboxes may be full. People change jobs, and email addresses become inactive. People make typos with email addresses. People may sign up with a group alias, and then one of the addresses in that group bounces. Temporary server or DNS outages can affect delivery for everybody on a given domain. And then there are spam complaints.

So right out of the gate, the deck is stacked against you. There are plentiful edge cases, and it’s incredibly difficult to get an accurate picture of delivery. Ongoing monitoring is complex, and there’s a lot of room to make mistakes. It paints a gloomy picture, I know. Fortunately, email has come a long way, and while it’s not trivial, there are good solutions to all of these problems.

Transactional vs. Bulk Promotional

Before we go further, we need to address the significant differences between bulk promotional email and your application’s transactional email. With the former, if an email is lost or delayed, nobody is going to miss it. With the latter, however, a missing or significantly delayed password reset can lead to additional support requests. Your transactional emails are as critical as a page in your application. You can think of a missing or delayed email as being roughly equivalent to a broken page in your web application. Email is a different medium, but it is still a central piece of the experience of using your application.

Because people expect and want to receive transactional emails, they see higher engagement in terms of open and click rates than your bulk promotional email. Similarly, transactional emails will be reported as spam much less frequently than bulk emails. And all of that leads to a better reputation for your transactional email than the bulk promotional emails. In some cases, that could be the difference between the inbox and spam folder. Or, it may just be a matter of which tab Gmail puts the email in. Regardless, the differences between transactional and bulk are stark enough that even Gmail officially recommends separating the streams. That way, your bulk reputation won’t drag down your transactional reputation.

This brings us to our first tip:

1. Separate your transactional and bulk sending streams using different domains or subdomains

In a perfect world, you’d send transactional through your primary domain, and relegate bulk to a subdomain like something@marketing.example.com and each category would have its own IP addresses as well.

Separating your streams is the first step and critical to lay the ground work for the best possible email experience for your recipients. While you can’t guarantee delivery to the inbox, you can do a few things to stack the deck in your favor. Authentication is the next step to doing precisely that. Just like you wouldn’t launch a modern web application without a secure certificate, you don’t want to send email without fully authenticating it.

Email Authentication

You may have heard acronyms like DKIM, SPF, or DMARC, and you may have even copied and pasted some DNS entries to set these up. Or you may have skipped it because it felt a little too complex. Either way, these are all standards worth implementing, and they all complement each other and work together to build and protect your reputation. The exact approach to these will vary from provider to provider, but it’s always worth implementing.

Let’s start with DKIM. Without getting too much into the technical details, DKIM does two things. First, it acts as a sort of virtual wax seal on your emails to show that they haven’t been modified in transit. Second, it enables you to build domain reputation. While DKIM focuses on the domain, SPF focuses on providing a list of approved IP addresses for sending so that receiving mail servers have a better idea of whether an email is being sent from a legitimate source.

One significant benefit of DKIM is that it’s the key to avoiding “via” labels in Gmail or “on behalf of” labels in Outlook. These elements make your emails look a little more likely to be spam and can undermine the trust of your recipients. So DKIM is much more than a behind-the-scenes standard. It’s something that can directly affect the experience of your recipients.

That all brings us to the next foundational tip:

2. Authenticate emails with DKIM and SPF

While authentication can’t guarantee delivery, it’s a key facet of building a reputation and doing everything you can to ensure great delivery.

DMARC is designed to help protect against phishing attacks. It incorporates both DKIM and SPF to help you monitor sending for your domain and protect your domain reputation by enabling you to publish a DMARC policy. That policy tells inbox providers what to do when an email fails DMARC alignment.

Before DMARC, it was entirely up to inbox providers to choose how to handle emails that weren’t authenticated with DKIM and/or SPF, but with DMARC, you’re able to create a public policy that tells providers to quarantine (send to the spam folder) or reject (outright discard) emails that fail DMARC alignment.

The other benefit of DMARC is that it enables ISPs to deliver reports to you about the sources of email sent using your domain and the quantities that passed for failed alignment via DKIM or return-path. This can enable you to track down legitimate sources that are failing alignment and take action to ensure those sources are authenticated. It can also help you quantify the amount of illegitimate email that’s attempting to be sent using your domain.

PayPal is the quintessential example of the importance of a good DMARC policy. Over the years, countless scammers tried to spoof PayPal emails, but now, with DMARC, PayPal has a published DMARC policy telling ISP’s to reject emails that don’t pass DMARC. So if any scammers try to spoof a PayPal email, they’ll fail DMARC alignment, and the ISPs can be confident in fully rejecting those emails because PayPal has a public policy saying that if an email fails alignment, it should be rejected.

That’s a very brief overview of DMARC, but hopefully it helps provide the context for our third tip:

3. Establish and publish a DMARC policy

Also, if possible, set up a custom return-path to maximize your chance of alignment. Then, monitor your DMARC reports and make adjustments to ensure alignment for any legitimate sources of email. Finally, if your product or brand is the target of a high quantity of phishing attacks, begin phasing in a progressively more aggressive quarantine or reject policy over time.

Postmark’s DMARC tool is a free and easy way to establish a DMARC policy and begin receiving weekly reports about your domain. With your bulk and transactional email streams separated, and all of the afore-mentioned authentication set up, you’ve handled all of the foundational aspects of delivery. From here on out, we’ll focus on the email handling and treatment within your application.

Understand The Email Lifecycle

On the surface, email can sound pretty simple, but when you break down the email lifecycle, there’s a lot of subtlety and opportunity below the surface. The better you understand that, the more you’re able to provide a more nuanced and rich experience for recipients. Most of your opportunities to improve the email experience depending on understanding the nuances of email delivery and automating your application’s ability to process and handle them accordingly. So let’s look at the key events in the life of any email.

Queued

Once your application has assembled an email from the various bits of content, you’ll queue it up for delivery. Within your application, you’ll want to ensure that you’re sending email via background processing. We’ll discuss this in depth later, but the simple version is that any time your application communicates with a 3rd party service, you’ll want to handle that communication in the background. Assuming you’re using an email service provider, once you’ve made the request to their API, it will be queued for sending on their end as well.

Sent

Like any service, your email service provider will have their own queue for processing and sending your email. In most cases, these queues are extremely fast. Whereas sending a bulk email to thousands of recipients can take seconds or minutes, most transactional email will be sent much faster.

Accepted

After the email is sent by your email provider, it will ideally be accepted by the inbox provider. However, “Accepted” does not mean “Delivered.” Think of it like the postal service. Just because it has your letter, it still has to process it before it is considered delivered. Also, some inbox providers will accept an email but not ultimately deliver it for a variety of reasons. So even when an email has been accepted, there’s no guarantee that it will eventually be delivered.

Rejected

While some inbox providers will quietly reject emails, in most cases, when emails are rejected, it’s done explicitly, and you’ll receive an explanation of the problem with the email. In some cases, it may be IP or domain reputation, or it may be the content of the email. Unfortunately, you won’t always get a clear explanation of the reason for rejection.

Bounced

Bounces are a more specific type of rejection. In cases where an email address doesn’t exist, the inbox is full, or some other reasons, mail services will report back that delivery failed and the email bounced. In these cases, you can use your ESP’s bounce handling notifications to proactively take steps to correct the problem. We’ll discuss that in more detail later.

Delivered

Delivered is the state where the message has been given to the recipient. It may have been delivered to the inbox, spam folder, or one of Gmail’s tabs, but it has been delivered to some degree. You won’t ever receive an explicit notification that an email has been delivered, but it’s a key state in the lifecycle.

Opened/Clicked

Open tracking isn’t entirely reliable because the method used to determine when an email has been opened can be blocked by the email client. Since open tracking relies on the email client to load an invisible image, clients that block image loading mean that those opens won’t be reported. Open rates can serve as a good proxy for delivery. For instance, if you switch email service providers without changing anything about your emails, and your open rates jump significantly, it’s safe to assume that your first email service provider was failing to deliver some portion of messages.

Click tracking is more reliable than open tracking, but it can bring complexities of its own. For instance, using Bit.ly or other URL shortening services is a common tactic used by spammers, so in most cases, the presence of a Bit.ly URL will put your email on the fast track to the spam folder. However, when done well through your email service provider’s click tracking, it can provide useful insights for your emails. Also, even if open tracking is blocked by a client, if someone clicks on an email, it’s safe to assume that the email was opened. So click tracking can help provide more accurate insights on open rates as well.

With open and click tracking, it’s important to give some consideration to privacy. While they can be powerful tools for enriching your recipient’s experience and providing you insights that can be used to improve your emails, they also touch on privacy issues. If you’re not going do anything with the data they provide, you’re better off not using them. Or, if you’re in an industry where privacy is highly sensitive, you’d probably want to think twice before enabling them.

Unsubscribed

While unsubscribes are less relevant for transactional emails, it’s still a request that should be respected. While you may not be legally obligated to support unsubscribing from transactional emails, it’s a status you may encounter, and when you do, you should respect it.

Spam Complaint

Like unsubscribes, spam complaints are less frequent with transactional email, but they still happen. If your spam complaint rate is high, it’s a good sign that you need to adjust the quantity and/or quality of the transactional emails you’re sending. Like bounce handling, you’ll want to be proactive about spam complaints as well. You’ll want to respect them, but it’s important to remember that some spam complaints are accidental. If someone reports an email as spam, it could affect them receiving future bills or invoices.

This brings us to our fourth tip:

4. Closely integrate message events into your application

Most email service providers offer extensive web hooks to automatically notify your application about key events with each message. While bounce handling is the most critical event to track and handle, the other events can provide useful information to enrich your application and make transactional email a more seamlessly integrated element of your user experience.

Take Care With Email Content

The content of your emails can play a role in both delivery and engagement. While some rules (such as avoiding the word “Viagra”) may be obvious, others are more subtle. Taking care to craft good content can drastically improve open rates or engagement.

We’ll group several considerations into our fifth tip for great transactional emails:

5. Take time to craft the content and structure of your emails

Things like the sender name and email address, the subject, preheaders, and mime types can have a meaningful impact on engagement, delivery, and open rates. Don’t let these elements be afterthoughts. Make time to get them right and continuously test and improve them as if they were any other page in your application.

Senders, Subjects, And Preheaders

While every email client is different, they all provide some level of insight about an email before it’s opened through some sort of preview. That can be as simple as displaying the sender and the subject, but it also sometimes contains a preview of the content. This topic could justify an article unto itself, but suffice it to say that it’s worthy of spending some time viewing your emails the way your recipients will. This includes clearly naming the sender, writing a useful and concise subject line, and crafting the perfect preheader. Don’t let these elements be an afterthought because they can have a significant impact on your open rate.

HTML And Plain Text

The actual content of your emails is important, and including both HTML and plain text versions of your emails can have a huge impact on your recipients. Some people prefer plain text. Whether for performance, privacy, or accessibility, providing a well-formatted and considered plain text option is a win for that recipient. And some spam filters prefer to see a plain text version paired with an HTML version. Litmus has a great writeup on the importance of plain text options in emails for more details.

Accept Replies And Avoid “No-Reply” Addresses

Do what you can to avoid using “no-reply” email addresses. They send the wrong signal in every way possible. As a result, you’ll receive more spam complaints since people can’t reply to unsubscribe. It’s one-way communication and reduces engagement that could otherwise improve deliverability.

Ideally, the from address or reply-to address would send replies to a monitored support inbox. This provides the best experience for recipients and ensures that replies don’t get lost in the mix. However, there’s one main consideration to keep in mind. If a user receives a password reset URL and replies, anybody with access to the reply will also have access to that password reset URL. The same goes for any particularly sensitive information, but, all things considered, you don’t want to send highly sensitive information in email anyways.

Another option is to use inbound receiving email addresses. In the case of things like comment notifications where it might be useful for the recipient to respond directly to the email, setting up inbound email processing can give you the ability to avoid no-reply email addresses.

Regardless of the method, you should always do your best to avoid no-reply addresses. Your customers will appreciate it, and you’ll be much more likely to receive important feedback if you’re listening on all channels.

Handle Email With Care

The content of your email is important, but how you deliver it and respond to edge cases with delivery can be just as important. There’s a lot that happens (or can happen) with each and every email you send. While most conversations with email focus simply on sending it, how you send it can be just as important.

We’ll group this batch into the sixth high-level tip for great transactional email delivery:

6. Invest in the infrastructure to send and deliver emails reliably

Sending emails sounds simple, but there’s a lot more to it than writing a few lines of code. It’s important to build and maintain the proper infrastructure like background processing and bounce handling to ensure the highest possible reliability for your email.

Background Processing

Assuming you’re using an email service provider, you’ll want to ensure that all of your email sending happens via background processes. This is the case with any communication with any external services, and there are a few reasons. First and foremost, with an external service, there’s always the possibility that it’s down. So if the request fails, it’s important to be able to retry the request automatically after a set period of time. Alternatively, there could be a problem with the request, or something may have changed on the part of the external service. Regardless of the reason, designing resiliency into your email sending will save you some grief at some point.

Similarly, a good background processing setup can make it easier to be alerted to and troubleshoot issues when something does go wrong. If you set up alerts when a queue runs high, you’ll know more quickly when there’s a problem. Also, assuming your background processing is capturing and logging errors, you’ll have a much easier time identifying the source of the issue.

Understand Dedicated IPs

If you’ve looked into transactional email to any degree, you’ve likely encountered the concept of using a dedicated IP address. While there are benefits to using a dedicated IP address, it’s not a black and white issue. In some cases, a dedicated IP address can hurt more than it helps.

With almost every email service provider, you have two options for sending. The first option is to send from the shared IP pool. In these cases, your delivery can be affected by the behavior of other senders using that same IP address. If those senders are nefarious, it can drag down the IP address’s reputation. However, if those senders are good, it can lift the IP address’s reputation.

The second option is a dedicated IP address. With a dedicated IP address, if there are reputation issues with the IP address, you only have yourself to blame. The catch is that, in order for a dedicated IP address to work well, you have to have a consistent daily volume that’s high enough to build and maintain a reputation. That’s somewhere around 10,000-20,000 emails per day. You also have to be careful to slowly warm up the IP address by sending progressively more mail consistently over a set period of time. And, while there are no bad senders to drag your reputation down, it also doesn’t receive any benefit from good senders who could help buoy your IP reputation. With most email service providers, dedicated IP addresses cost more as well.

Finally, while IP reputation still plays a role, inbox providers are increasingly weighting domain reputation in conjunction with IP reputation. Since IP addresses are increasingly disposable, putting more reputation on domains helps mitigate spammers cycling through domains because new domains would have to build reputation. This also means that if you’re having widespread delivery issues, those problems could be attributable to either the IP address or your domain. So swapping IP addresses may help, but if your domain reputation is suffering, changing the IP address won’t help. You’d instead have to focus on cleaning up your domain reputation.

While dedicated IP addresses can be great under the right circumstances, it’s not a slam dunk. And, if you’re using a shared IP address, you’ll want to make sure that you’re monitoring it closely to ensure that other senders aren’t ruining its reputation or landing it on blacklists.

Bounce Handling

Emails bounce. There’s no way around it. The reasons for bounces vary, but the need to handle bounces gracefully is universal. Think of bounce handling as exception handling for email. When an exception happens, you don’t want it silently discarded. You want to know that it happened and what caused it so that you can fix it. The same goes for bounce handling with one caveat. With bounce handling, you can empower your users to fix most problems themselves. This simultaneously increases customer satisfaction and reduces support requests.

When an email bounces with a hard bounce, the most important step is to stop attempting delivery to that address. While some hard bounces may eventually start working again on their own, repeated bounces to the same address is a highly negative signal to inbox providers. From their perspective, it means you’re not keeping your lists clean and that there’s a good chance you’re a spammer.

Unfortunately, if you stop attempting delivery to an address, and that address begins working again, your recipients won’t be able to get their emails. That’s where bounce handling comes in. Using webhooks, your email service provider can automatically notify you of new bounces. Then, you can use that information to present alerts within your application that there were issues delivering the email. That way, your users can correct the issue, and then reactivate delivery.

Postmark makes this even easier with Rebound, a simple JavaScript snippet that can be customized and included in your application to proactively alert users to delivery issues so they can correct the issue before it leads to bigger problems or support requests.

Notification Management

With transactional emails, unsubscribing is less of an issue than it is with bulk promotional emails, but providing recipients a way to unsubscribe or manage the volume or types of transactional emails they receive is still great to do.

One-click unsubscribes for each type of email you send can make things convenient if recipients don’t want to receive email for certain types of notifications. Alternatively, providing a preference center for transactional emails is a great way to put more control in recipients’ hands. However, if you go the preference center route, keep the options to a minimum. Keep in mind that a page with an abundance of checkboxes can be overwhelming or confusing. So while granular control is nice, too many options can be counter-productive.

One of the best ways to cut down on frequent notifications is to offer options such as instant, daily, or weekly summaries. That way, you give recipients significant control over notifications to enable them to drastically reduce the quantity without overwhelming them with fine-grained control for dozens of different types of notifications.

Regardless of the method, recognize that giving control over the frequency of notifications can go a long way to helping your customers while also helping to reduce your overall volume of emails. It’s a win-win for your customers and your email costs.

Tools And Monitoring

While other facets of application development have made impressive strides in tooling, best practices, and reliability, email is still somewhat of a black box. With applications, you can monitor uptime, page load times, application performance, and countless other aspects. Since email inboxes are private, however, there’s no way to accurately measure real delivery information. Open and click rates can serve as decent proxies, but they’re still only proxies. Fortunately, there are some great tools that can complement each other and, together, provide a relatively clear picture of your email delivery.

This is key to appreciating our seventh and final tip:

7. Use available tools to monitor and improve your delivery

Just like you’d monitor your application’s uptime or performance, it’s equally important to monitor email delivery. While no one tool can tell you everything, a combination fo great tools can make a huge difference in ensuring that your email delivery is reliable and help troubleshoot those times when it isn’t.

In order to have good coverage, you’ll want to use the following tools and pay close attention to patterns over time.

  1. Monitor trends in open and click rates for your emails. It’s only a proxy, but it’s good for relative historical numbers. For example, if you notice your open or click rates falling dramatically over time, that’s often an early warning sign that you may be encountering delivery issues. Since an email can’t be opened if it’s not delivered successfully, decreases in open rates can be caused by delivery issues.
  2. Gmail offers Postmaster Tools which can help you gauge IP and domain reputation to understand which email sources may be having delivery issues. This is a great forensic tool to turn to when you suspect that you may be having delivery issues. It only provides insight from Gmail, but that’s often a good-enough proxy for understanding how your reputation might look to the other providers as well.
  3. Use the MXToolBox Blacklist Check to see if your domain or IP address has landed on a blacklist. If you’re on a shared IP address, you probably want to set up a permanent and automatic monitor for that shared IP address so you’ll know sooner if you end up on a blacklist.
  4. Use a tool like GlockApps or 250ok to monitor inbox placement for your emails. It’s important to keep in mind that these tools rely on seed lists to test delivery. That is, since they can’t test delivery to real recipients’ inboxes, they have to use test addresses as a proxy. Like with most email delivery tools, this isn’t a perfect science, but in practice, it’s close enough to still be very useful at gauging delivery quality.

The more monitoring and alerting you have in place, the sooner you’ll know about problems and be able to correct them. Often, poor email delivery can be an invisible problem that only surfaces when support requests begin to show up, but by then, you could have already had 100’s or 1,000’s of emails end up in spam folders or not arrive at all. Just like you wouldn’t want your customers to be the ones alerting you to application downtime, you don’t want them to be the first to alert you to potential delivery issues either.

Bring It All Together

You have plenty of options when it comes to sending email. You can even set up a server and Mail Transfer Agent (MTA) and send for yourself if you’d like, but you’ll be taking on a lot of responsibility and overhead. Managing reputation is difficult. Establishing relationships with ISP’s is even harder.

Unless sending email is your core service, you’re often better off turning to an email service provider. Even then, it’s important to recognize that great delivery can’t be a foregone conclusion. Even though all ESP’s claim that they provide great delivery, that’s not always the case. In most cases, when you’re evaluating ESP’s, you’ll be much better off if you use the tools mentioned above to get quantifiable delivery information for yourself rather than taking their word for it. This is true whether you use a shared IP address or a dedicated IP address. Great delivery isn’t automatic, and you should always be gathering hard data on your delivery.

Regardless of how you handle email, make sure to treat it as an extension of your application’s user experience rather than an afterthought. Take time to write concise and helpful emails, and do everything possible to seamlessly integrate it into the user experience. Be judicious about firing off too many emails, and give your users the ability to tune email notifications for their needs.

Finally, monitor your transactional email delivery like you would any other service in your stack. If your users aren’t receiving critical emails like password resets and invoices, you’ll be losing goodwill, and your support costs will increase. Don’t let your email delivery fail quietly. Make sure that you’re notified quickly and loudly of any potential delivery issues long before it gets bad enough for your customers to email you.

Your application can’t work without email. While it’s not as easy to measure or monitor as most aspects of your application, it’s still a critical piece of functionality that deserves your full attention. Invest the time in making your email experience great, and you’ll unquestionably reap the rewards.

(ra, il)
Categories: Web Design

How To Get To Know Your Users

Tue, 06/26/2018 - 04:50
How To Get To Know Your Users How To Get To Know Your Users Lyndon Cerejo 2018-06-26T13:50:41+02:00 2018-07-11T12:36:25+00:00

(This article is kindly sponsored by Adobe.) Users are at the heart of User-Centered Design (UCD), with designers focusing on actual users and their needs throughout the design process. The goal is to design interfaces and products that work for those users.

As much as we would like to think that our users are like us, they are not. Anyone involved in the creation of a product or an interactive experience, be it a site, system, or an app, is not a typical user — and that includes all the business stakeholders, designers, and developers. As advocates of users, we often have to remind ourselves and others of one of the primary UCD commandments:

“Know thy user, and YOU are not thy user.”

Arnie Lund

How well do we really know our users? Traditional UX research focuses on user needs, expectations, and goals, most of what is visible and observable, like the tip of an iceberg. That works well for designing user experiences that meet user needs, allowing them to complete tasks and achieve their goals. But if the design needs to persuade users to take some action, we need first to identify what motivates or inhibits them.

(Large preview)

This article will look at how going below the surface during user research helps us really understand what triggers our users, and how those deeper insights will help us design for persuasion.

Traditional UX Research

One of the first steps in design is identifying and researching who we are designing for so that we can focus on the groups of users that matter the most, and ensure that the design meets or beats their expectations.

User research is a great way for us to get a deep understanding of the people we are designing for. User interviews and contextual inquiries, focus groups, and surveys are commonly used research techniques to understand actual users, along with their needs, expectations, and goals. Sometimes, during user interviews, feelings or emotions may be mentioned in the conversation, but are not usually the central focus of the research.

User interviews that are based on task analysis usually focus on:

  • Who they are (profile);
  • What they do, when and where (context);
  • Why they do it (needs, goals, tasks) ;
  • How they do it (experience);
  • What they like or dislike (frustrations).

This research is valuable; it gives the entire team a shared understanding of actual users and builds empathy during the design process. One way to bring these users to life and make it easy for everyone to visualize the actual end users of the product or service is by creating user personas. A persona is a fictional, yet realistic description of a typical user from a key user group. There are many variations and formats, but the description usually includes personal, professional and technical information about the user, along with their knowledge, experience, goals, and frustrations related to the product or service. Give them a name, and put a face to that name, and you get to meet “Soccer Mom Sue” or “Function Over Form Fitz” (shown below).

Car buyer persona Fitz Grant, extrapolated from User Experience Takeaways From Online Car Shopping, based on persona development questions from usability.gov. (Large preview)

One way to keep these users top of mind is to put up posters of personas in the work area to remind us of who we are ultimately designing for, during all stages of the project –from defining requirements through design and development.

When prioritizing new features and enhancements, the deciding factor is no longer subjective, or based on personal preferences and likes of HiPPOs (Highest Paid Person’s Opinion), but focused on the user: “Will this new feature entice Fitz to use our site to configure a car?” or “Will this make it easier for Susan to compare our car models?”. Fitz and Susan also serve as constant reminders to designers who try to create “bleeding edge” designs (“Would Fitz find this interface intuitive?”), and to developers tempted to incorporate the latest technology (“Will Susan’s computer support this new technology?”). In time, Fitz and Susan become entrenched in the project, helping us build for them, not us, resulting in a solution that is useful, usable and meets their needs.

This works well to create products and interfaces that are functional, efficient and usable, allowing users to complete their tasks and achieve their goals.

Behavioral Research For Persuasive Design

Usability or task-oriented user research mainly focus on the cognitive level, how and why our users think, reason and act the way they do. We may sometime scratch the surface and get some feelings from these users, but we don’t usually don’t probe deep into their emotional experiences.

Behavioral research builds on traditional research approaches since persuasive design is aimed at changing behavior. Some examples of behavior changing actions in design include persuading users to try or buy a product or service (get a quote, schedule a test-drive), start or stop a behavior (start exercising, stop smoking), or convincing them to act on a belief or information (donate, vote).

If you are already using persuasive design techniques, quantitative data can identify which tactics are working for your users. But there is a wealth of information that you can get from qualitative methods like user interviews. One-on-one interviews allow researchers to dig below the cognitive level, and reach the emotional level to get to users’ feelings and beliefs. Advertisers and marketers have been doing this for years and you can see the results in the campaigns you are bombarded with daily.

During behavioral research, researchers focus on the users’ feelings, emotions, motivations, and barriers related to the action that is being triggered. For a common behavior target of getting the user to buy something, look for how users feel during the purchase journey. As an extreme example, while probing the purchase of “stigmatized products” (tobacco, alcohol, or personal enhancement products), users may have feelings of embarrassment, shame, over even guilt associated with the purchasing experience.

How do you get the user to discuss their emotions? Psychotherapists go through years of education and training before they master the art of unearthing mental, emotional, and behavioral issues to help their clients. Since our user interviews do not have the same life-changing impact or consequences, we do not require the same level of rigor. However, this is not something you can learn overnight, but you can learn more through courses like HFI’s PET Design. This article will not attempt to teach you how to do it, but introduce how these user interviews differ.

User interviews that focus on emotions, beliefs, and feelings focus on the intended action and:

  • How users feel (about the intended action);
  • What emotions are evoked in the process;
  • What are their emotional motivations to complete the intended action;
  • What are their barriers that may prevent them from taking the intended action;
  • Their values and beliefs related to the intended action;
  • Social or cultural factors that may impact the experience.

In a nutshell, the user interviews still start off by building rapport and learning about the user. After that, the interview focuses on the desired action by using a scenario and stimulus (e.g. buying a car), and a few closed-ended questions to get the participant on a topic (e.g. “When was the last time you bought a car?” and “Did you research your car online?”). Once the user is in the frame of mind of the scenario, the questions transition to open-ended questions that probe for emotions (“Can you describe that experience?” “What did that feel like?” “Why did you feel that way?”). The key is to guide the user from thinking to feeling, from facts and reason to emotions, and probing the subconscious, looking for motivators and barriers to them taking the desired action in the scenario. Interviewing techniques of active listening, not leading the user, and not being judgmental, all hold true.

Car Shopping Example

Let’s use an example of buying a car and see how we can really get to know the users. For the sake of simplicity, let’s focus on one persona (shown previously): Function Over Form Fitz, created based on the persona development questions from usability.gov. We’ll follow Fitz as he contemplates buying a car.

Fitz Grant is a 44-year old IT director who recently moved to Georgia to escape the cold winters of New Jersey. He, his homemaker wife, and two middle-school sons have always been a single-car household, but without access to reliable mass transit in his suburb, he is looking to buy a car for his daily 90-minute work commute.

The persona and scenario above are common for task analysis oriented user research, including their needs and frustrations. However, if you focus on probing the emotional aspect of buying a car, user interviews may uncover the following themes for barriers and motivations:

(Large preview)

Barriers (strongest to weakest, strength shown using a battery indicator):

  • Fear of failure
    • ‘I’m scared of making the wrong choice with such a high price tag and letting down my family’
  • Fear of being manipulated
    • ‘I detest the thought of having to deal with aggressive sales tactics or being pressured into unnecessary upgrades or warranties’
  • Fear of compromise
    • ‘I will be disappointed if I have to compromise on features I need because of dealer inventory or cost’
  • Fear of being judged
    • ‘I don’t like being thought of a cheapskate; I am just looking for value and a good deal.’

Motivators (strongest to weakest):

  • Safety
    • ‘I need to be safe and secure in my car, especially with all the distracted driving around me’
  • Control
    • ‘I would like to be able to customize options that are important to me; I don’t want the “technology package”, I only need the safety features and Bluetooth connectivity for my calls’
  • Value for Money
    • ‘For the price I will be paying, I should get some ongoing service benefits like free oil changes from the dealer.’
  • Excitement
    • ‘I get a high when I can combine incentives, rebates, and discounts to get a great deal!’
  • Knowledge
    • ‘I like to be prepared and research on my own, so I can be confident with my choices’
  • Self-Image
    • ‘I’m technology savvy to be able to do everything online, except the test drive!’

Armed with this additional information, we can orchestrate the experience to weaken the barriers and strengthen the motivators to get users like Fitz to take the intended action, like requesting a quote on a car currently in stock in the dealer lot. To weaken Fitz’s “Fear of Failure” barrier, a site could highlight that they offer a 24-hour test drive, which allows him to drive it home, see how it fits in his garage, and sleep over the decision.

Given that safety is such a strong motivator, the site could frame the conversation around safety through a combination of color, imagery, content, third-party award badges (IIHS Top Safety Pick+), user testimonials, and interactive simulations. Function Over Form Fitz may even change to Safety Minded Fitz.

This was a hypothetical example of how understanding your users’ barriers and motivations can help you preemptively address them through design, and make it easier for your user to take the intended action. It is important that we do this in an ethical manner, without resorting to pressure, or deceit.

Conclusion

Traditional user research helps us design meet users’ transactional and usability needs to make sure they can use a design. Research for persuasive design digs below the surface thinking level to the feeling level, and moves beyond the rational to the emotional level, to influence users to want to use the design. Getting to know your users at a deeper level will help you use psychology in design to get users to engage in behaviors they were already considering — with you instead of a competitor.

Further Reading

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

(ms, ra, il)
Categories: Web Design

What Newsletters Should Designers And Developers Be Subscribing To?

Mon, 06/25/2018 - 05:00
What Newsletters Should Designers And Developers Be Subscribing To? What Newsletters Should Designers And Developers Be Subscribing To? Ricky Onsman 2018-06-25T14:00:48+02:00 2018-07-11T12:36:25+00:00

We put out the call on Twitter and Facebook: “What email newsletters are you following these days?” The task of compiling your (many, many) responses has fallen to me.

I should disclose that I have a vested interest in that I currently edit a bi-weekly email newsletter for a conference organizer, UX Australia. In fact, over the years, I’ve edited dozens of email newsletters — some more successful than others.

Anyway, for the purpose of this article, we need to make a few things clear.

First, the newsletters that were most namechecked are included here in their own section: “The Favorites.” The eight that made this list comprise a formidable toolkit of newsletters for any web designer or front-end developer.

Second, I found that there are several types of newsletters which I tried to include representatively:

  • Aggregated links
  • Editorial
  • Company/product/service/event promotions
  • Tutorials
  • Broad industry news
  • Specific tech news
  • Combination of any of the above

Third, there is a lot of overlap in linked content from one newsletter to the next. That’s to be expected when everyone wants to break news and aggregate link-worthy articles.

Fourth, I focused on great newsletter content. It could be presented as sophisticated HTML with videos and infographics, or it could be no nonsense plain text with minimal descriptions, as long as the content — including how reliable any links are — is good.

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

Lastly, I tried to keep the focus to only actual newsletters that arrive in your email inbox, and that focus on what web designers and developers do. That’s not to deny the value of newsletters that give designers and devs a broader context for their work; I just had to draw the line somewhere.

I also excluded newsletters that claim to be bi-weekly but have produced just four issues in the last nine months (even if those four issues were very good) and “occasional updates.”

So, let’s see what we have. Buckle up.

The Favorites Smashing Magazine

Well, of course a lot of people mentioned our own newsletter, and we’re proud and grateful for our readers’ loyalty. I’ll also point out that ours is a rare example of all of the types of newsletter mentioned above, and one with a strong, clear voice. Just sayin’. Twice a month.

CSS Layout News

A high-quality weekly collection of tutorials, news and information on all things CSS Layout, edited by Rachel Andrew, editor-in-chief of Smashing Magazine, web developer, writer, speaker, author of The New CSS Layout, co-founder of Perch CMS. Weekly.

CSS-Tricks

It used to be primarily about CSS, but over the years CSS-Tricks has become about all things web design and development, and very popular it is, too. The newsletter is a great way to keep up, as Chris Coyier and his team regularly pull out new insights and clever styling techniques. Weekly.

CSS Weekly


Front-end dev Zoran Jambor’s hand-picked selection of CSS new, views, tips and techniques from a very wide range of sources, on everything from Unicode patterns to accessibility to security and query feature management. Weekly.

Layout Land

Mozilla Designer and Developer Advocate Jen Simmons knows a lot about CSS Grid and, lucky for us, she’s happy to share. The chief purpose of the newsletter is to let subscribers know about new videos available on the YouTube channel of the same name, but the editorial comments are great value in themselves. Monthly.

Web Development Reading List

Anselm Hannemann, front-end developer and founder of Colloq, compiles a mix of dev & design news, commentary, techniques, tools and broader work/life matters every week. There’s usually a short but pithy editorial, and then up to a dozen links with a paragraph about why it might be interesting to you. He also contributes monthly WDRL issues on Smashing Magazine. Highly readable.

UX Design Weekly

A hand-picked list of the best user experience design links, curated by Kenny Chen. A clearly defined balance of articles, tools & resources, media, portfolios and news — all focused on UX design. Has the twin virtues of feeling hand-picked and providing a great range of topics. Weekly.

JavaScript Weekly

From the Cooperpress family of publications, this is one of their strongest newsletters, a well chosen round-up of JS news and articles. The first set of article links get a brief and relevant paragraph description, while the rest are divided into Jobs, Tutorials, Opinions, Videos, Code and Tools with one line descriptions. Comprehensive and readable. Weekly.

Accessibility A11yWeekly

David A. Kennedy wrangles WordPress themes for Automattic, is an accessibility evangelist, and compiles this very useful dose of links to web accessibility news, resources, tools and tutorials. Weekly.

WebAIM

WebAIM has become a major and reliable resource for guidance and discussion relating to web accessibility. The newsletter includes featured articles, technical tips, resources, and questions from WebAIM's discussion forum. The featured articles are both from WebAIM staff and key web accessibility figures around the world. Monthly.

Animation UI Animation Newsletter

Keep up to date on the best web animation, motion design, and UX resources on the web. Subscribe for a weekly collection of curated tutorials and articles — plus advice on how to make web animation work for you. Written and curated by designer, interface animation consultant, speaker and author Val Head. Weekly.

Animation at Work

A hand-picked selection of articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design (which until last month was called “Web Animation Weekly”). It’s Rachel Nabors’ project, but the hands doing the picking belong to a range of guest editors who can be nominated by readers. Monthly.

Email Really Good Emails

RGE aims to be “the best showcase of email design and resources on the web”. A 3,300 strong gallery of examples, excellent articles, and links to a lot of resources suggest they really might be “the epicenter of the email earthquake, but in a good and happy-shakey kind of way.” You’d expect this lot to have a good newsletter, and they do. Monthly.

#emailweekly


Email design and strategy studio Action Rocket’s very useful collection of links to articles on design, HTML and creative concepts for email drawn from their own work and other pros in the field. Weekly.

Emerging Technology Dev Diner

Edited by Patrick Catanzariti, this is very well organized and aims to keep web developers inspired and in the know, with links to the latest in VR, AR, wearables, the Internet of Things, AI, robotics and all sorts of other new and emerging tech. Weekly.

Front-End Friday Front-end


ZenDev founder, front-end consultant and trainer Kevin Ball covers CSS-focused developments, industry news, tutorials and dev resources. Each newsletter has an intro from Kball followed by three sections: CSS, JavaScript, and Other Awesomeness (each with five items with handcrafted descriptions). Weekly.

Friday Front-End

This is a nice, simple format that works very well. CSS developer Scott Vandehey tweets a daily link to an interesting front-end article. At the end of the working week, these links are packed with a short description into an email. The selection is a thoughtful mix, so it feels less like a bunch of random links and more like a summary of key stories. Weekly.

Frontend Focus


Just one of a suite of targeted publications by Peter Cooper, software developer, podcaster and Publisher-in-Chief of tech niche newsletter company Cooperpress. This one focuses on HTML, CSS, WebGL, Canvas and front end-related news updates, articles and tutorials. Others cover JavaScript, Ruby, databases, mobile and more. Weekly.

Web Design Weekly

A newsletter and blog by Jake Bresnehan, that will help you to stay on top of all things web design and front end development. Links to tips & tricks, in depth articles, interviews, tools & resources, jobs and the occasional quirky story. Weekly.

Web Tools Weekly

A front-end development and web design newsletter with a focus on tools, curated by Louis Lazaris. Each issue features a brief tip or tutorial, followed by a round-up of apps, scripts, plugins, and other resources to help front-end developers solve problems and be more productive. Weekly.

Front End Front

A crowd curated feed of front-end related articles, by brothers Stelian and Sergiu Firez. Site visitors vote up articles linked to from the feed. The newsletter is a list of the top 10 voted most recent articles. Topics are what you’d expect: CSS, JavaScript, HTML, images, performance — mostly technical, some bigger picture. Definitely some links not seen elsewhere. Weekly.

JavaScript ES.next News

The latest in JavaScript and cross-platform tools. Get five ECMAScript.next links delivered to your inbox, every week. Not afraid to mix highly technical code-focused pieces with bigger picture industry stories. Curated by Dr. Axel Rauschmayer and Johannes Weber. Weekly.

Typography Adventures in Typography

A love letter to the written word, by Robin Rendle. Topics include “calligraphy, lettering, display type, micro type, books about fonts, type specimens, neon lights, posters, morse code, stamps, literature, web design, and books about seeds”. The format is that of a proper letter written by Robin to you which is rather lovely when it’s from someone so passionate. Weekly.

Fresh Fonts

Curated by Noemi Stauffer and featuring the latest free and open-source fonts, the most solid new typefaces by indie foundries and discount codes, this is a concise and well-compiled exploration of (mostly) newly released fonts and how you can get them. Twice a month.

Coffee Table Typography

A love for words, letters, language, and coffee. This digest of resources, articles and knowledge of typography — in design, on the web, or books — is curated by Ricardo Magalhães. More than just a set of links, Ricardo digs into the articles he’s linking to, whether it’s a new font release or a deeper look into the role of typography on the web. Once or twice a month.

User Experience UX Collective

Founded by Fabricio Teixeira and Caio Braga, this has become a bit of a UX behemoth, publishing a high volume of original articles and aggregated material on a range of UX and design related topics. Impressive output in terms of both quantity and quality. The newsletter reflects that. Weekly.

Uxcellence

Designer and developer Ste Grainer founded this “love letter to user experience design, front-end development, building products, and making the world a better place.” His newsletter collects links to the latest UX articles and resources, as well reminders of older, good resource links. Monthly.

User Interface Engineering

Jared Spool has a hard-won global reputation as a consultant, trainer, speaker and writer on usability, UI and UX. It’s not surprising, then, that he realizes the great value of older content. The UIE newsletter is as likely to link to an article from five years ago as yesterday, if it’s still relevant — and, with user-centric topics, that’s often the case. Smart and useful. Weekly.

UX Booth

By and for the user experience community, founded by Matthew Kammerer, David Leggett and Andrew Maier, for a readership mostly of beginning-to-intermediate user experience and interaction designers. The newsletter highlights one new inhouse article a week, plus links to three or four external UX articles and the occasional (often remote) job listing. Concise, focused, digestible and reliable. Weekly.

UXmatters

Founded by Pabini Gabriel-Petit in 2005, this provides insights and inspiration to experienced professionals working in every aspect of UX, as well as beginners. The newsletter focuses tightly on new content on the website, but when you publish up to six articles, interviews, panel discussions, and technical pieces a week, that makes for a good newsletter. Weekly.

Web Design An Event Apart Digest

In 1997, Jeffrey Zeldman and Brian M Platz started a mailing list called A List Apart. It evolved into one of the world’s leading magazine sites “for people who make websites” and spawned the An Event Apart conference series and book publisher A Book Apart. The Digest wraps all of this activity up and adds links to other interesting articles, videos and resources. Monthly.

Web Designer News

Built “to provide web designers and developers with a single location to discover the latest and most significant stories on the Web.” Content includes “quality news, fresh tools and apps, case studies, code demos, inspiration posts, videos and more”. It is extremely comprehensive, and posts links every couple of hours. There is a user voting system, and the most shared items are featured in the newsletter. Daily.

WebdesignerDepot

In 10 years, WDD has grown from a blog into a genuine online magazine for web designers — and developers, content authors, specialist and generalists. Drawing on a stable of inhouse writers and external contributors, including some high-profile industry type. The newsletter highlights 10 or so items ranging across news, product info, design, code and WDD’s monthly round-up. Weekly.

Sidebar

Since 2012, Sidebar has been collecting links about UI design, typography, CSS, user research, and all other facets of design. It's now a trusted resource for thousands of designers across the world to stay on top of the latest news, trends, and resources. Each newsletter can include from three to a dozen links. Daily.

Speckyboy

The website was launched in 2007 as an inspirational hub for web designers. As web design trends became more advanced and more tools became available it evolved into a web design magazine. Articles are usually published daily, which makes for a satisfyingly full email newsletter. Weekly.

Responsive Design Weekly

Web developer Justin Avery’s side project ResponsiveDesign.is has become a go-to site dedicated to providing beginners and advanced users tips, tricks, inspiration and resources for responsive design projects. The newsletter is equally popular and a very convenient way to keep with responsive design news. Weekly.

The Web Designer Newsletter

A heady mix of image-heavy product placement, sponsored items, free resources and links to articles, this newsletter regularly comes up with links to articles I don’t see elsewhere. I don’t know who is behind it (the very brief website just says “curated by designers for designers”), but it’s hard to ignore. Weekly.

Design Systems

A curated publication full of interesting, relevant links. I would call this an example of an educated, focused and informed newsletter of links to web resources that genuinely advance thinking on design systems. Providing just an article title and link makes it feel robotic and impersonal, but maybe that’s an approach you’ll like. Weekly (more or less).

Web Field Manual

A curated list of resources focused on documenting knowledge for designing experiences and interfaces on the web. It is an ever-expanding collection of knowledge and inspiration for web designers, by web designers — namely Jon Yablonski, Garrett Wieronski, and Geoff Tice. The Dispatch keeps you up to date. Weekly.

Web Design Update

This is an oldie but a goodie, a plain text email digest disseminating news and information about web design and development with an emphasis on user experience, accessibility, and web standards. Around since 2002 (with a name change), it’s linked to the university-based Web Design Reference archive, and it is still edited by Laura Carlson. Weekly.

Web & Tech Versioning

SitePoint is a publisher of books, articles, videos and community forums on all aspects of web design and development. It produces several weekly newsletters, but this is the cream of the crop, curated by Adam Roberts. Short, sharp, timely, useful and often linking to items of industry interest that others miss. Daily.

Hacking UI

David Tintner and Sagi Shrieber’s favorite articles about design, front-end development, technology, startups, productivity and the occasional inspirational life lesson. They pack in a lot of links, which might be why they list only the article title linked to the source. With such a broad remit, there is a lot of overlap with other newsletters, but it’s all in one package. Weekly.

Hacker Newsletter


This side project of MailChimp’s Kale Davis links to stories on tech startups, programming developments and other stories featured on Hacker News. That means this is another list of links, with not much to say where you should direct your attention. Still, those links are pretty good. Weekly.

Pony Foo Weekly

A newsletter about the open web, highlighting the most important news about the web every Thursday. Founded by developer, author and speaker Nicolás Bevacqua, and now with a team of contributing authors, it also has lots of links to current articles about the web and tech. Weekly.

Offscreen Dispatch

Offscreen is a print magazine that focuses on people working on the web and with technology in general, edited and published by Kai Brach, a former web designer. Dispatch is Kai’s email newsletter offshoot in which he highlights products, news, events and insights for the discerning web worker. Classy and well selected. Weekly.

The History of the Web

Jay Hoffmann had the bright idea of collecting the moments and stories that make up web history to create an online timeline. Out of that came an email newsletter pointing to one or more of these stories. Highly readable, very informative, and often surprising. Weekly.

WordPress MasterWP Weekly

Alex and Ben produce this newsletter for WordPress professionals, with editorial and links to apps, tools and resources. It’s not all about WordPress, though — it’s what WordPress pros need to know, so there’s general small business, lifestyle and industry articles as well as WP-specific items, including technical pieces. Weekly.

wpMail.me

Curated by Cristian Antohe and Bianca Petroiu, this one carries more links to WordPress theme and plugin releases and reviews, tutorials, podcasts and videos — as well as more business, freelance and industry news and articles of interest to WordPress professionals and enthusiastic amateurs. Weekly.

Individuals

While I was compiling this article, I realized I have my own go-to set of people whose email newsletters I really look forward to. It’s not because they’re necessarily “the best” — it’s more that their choices of content, tone and focus strike a strong chord with me.

I’m sure you have your own, but here — apart from those who come up in the preceding sections — are the individuals whose newsletters I look forward to landing in my inbox.

And that completes our latest round-up of email newsletters for web designers and developers.

Did I say “completes”? Of course, this list is not complete! For one thing, it probably doesn’t have your favorites. Add them — preferably with a working link — in the comments below.

(vf, ra, il)
Categories: Web Design

Why Altruism Is The Ace To Get Your Dream Design Job

Fri, 06/22/2018 - 05:30
Why Altruism Is The Ace To Get Your Dream Design Job Why Altruism Is The Ace To Get Your Dream Design Job Andree Huk 2018-06-22T14:30:38+02:00 2018-07-11T12:36:25+00:00

Hunting for a design job can be daunting but it does not need to be. In fact, the most telling predictor of how user-focused a designer you are, is how you see the company you apply to.

In this article, I’d like to outlines uncommon tactics and crucial aspects that can help any designer. In order to get your dream job, I’ll discuss in detail on how to plan and execute your outreach to recruiters or hiring managers. Writing a stellar CV by analyzing job descriptions or calculating how many applications you have to send are just some of the aces in your pocket.

The Biggest Issue In Job Hunting

The cover letter below is the worst application we have received in years. It lacked everything you may be looking for in an application. Apart from neither an introduction nor a name, it tells the story about “me, me, me” at its best, unfortunately. And unsurprisingly, the “portfolio” did not match either.

The worst ever cover letter we have received. Can you see why? (Large preview)

I did hunt for a job myself in the past, of course. But since running blended.io for a few years now, I can tell that the attitude of “me, me, me” does not fly well. It is the biggest issue that prevents people from getting their dream job.

Can you see why? Imagine that you hire a painter to paint your living room. The painter comes by, does not listen to you and then paints the room in a color that he/she likes — not what you want. You hired a painter to paint the room in your favorite color, right?

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

Fundamentally, designers like to see themselves as the voice of the user. Designers solve user problems, don’t they?

Interestingly, that user-driven attitude turns into plain selfishness when designers start to look for a new job. Many want to solve their need only. Obviously, the company wants to hire someone to solve a problem they have internally. Henceforth, any designer who does not realize that the company one applies to is actually the user in question, should not be in (user-centered) design to start with.

Their needs and your desire usually make for a big gap. (Large preview)

When you look for a job, you may ask yourself:

  • Can I do interesting work?
  • Will I get along well with the coworkers?
  • Do they pay well?

Companies, on the other hand, ask themselves:

  • How much experience does s/he have?
  • Will s/he fit well?
  • Do we get extra value for what we have to pay?

See the problem? There is a clear gap. You may now say that the company is mainly focused on their problem, that is, matching a candidate with their internal need. Indeed, they are. Does a user for whom you are designing care about who designed the product? No.

By now you should be able to see why “Me, Me, Me” is such a big problem. An application that screams “Me, Me, Me” plainly shows the company that the applicant’s sole purpose is to look after her- or himself. For context, would you buy stuff you really don’t need? No. Alas, why shall the company hire someone they don’t need? In terms of UX or design in general, the most telling predictor of how user-focused you are is how you see the company you apply to.

When I started to write this article, I spoke with a friend of mine. Let’s call him Mark. Mark told me that he was on the lookout for a new job and that the process was going OK. I urged him to review his approach and cover letter regarding “Me, Me, Me.” The following day he changed the email and cover letter he had wanted to send and turned “Me, Me, Me” into “How can I help you achieve your goals?” Guess what? He was invited for an interview.

Of course, I cannot fully tell whether it was the change in approach or his strong portfolio, or something else. It may well have been the case. Though, I find it interesting that he was invited the next day.

Actual Applications, Real Insight

In the past, we’ve recruited designers and engineers for our innovation agency. After some time, you can see patterns emerging. To notice the subtleties of these patterns, we will review job applications that we have received.

The following are actual applications for a position as Software Engineer (NodeJS). These below are not handpicked but rather a somewhat random selection.

Applications for an engineering position. The amount of “I” is staggering and not a good sign of a great cover letter. (Large preview)

Let’s review the main points we notice from these applications above:

  • Around 80% of cover letters start with “Dear recruiter” or similar, not addressing a specific person. Why does this matter? We are not 100 people at our company. The applicant does not show interest as she did not bother to look up the person who could be in charge.
  • The majority of applicants start many of their sentences with something like “I can, I want, I will.” Why does this matter? When you design a product, who do you design for? Exactly, the user. As we pointed out above, the user is the company to which one applies.

As this is an article for designers, we will also review applications for a design role. After we received an application for an Interaction Designer, we sent out additional questions to the applicants to better understand their background.

Sending out additional questions to an applicant was step one when we received an application. (Large preview)

The form we sent out included a question about their past work and experience. As it turned out, many applicants sent very similar answers to the ones you see on the image above. The most interesting: On the question what the applicant focuses on most, almost everyone responded with “Visual design.” Keep in mind that the role advertised was for an Interaction Designer vacancy. I cannot tell whether it was clear to applicants what interaction design implies, but why would they apply if they don’t understand the role’s responsibilities?

Remember what I explained above? An applicant focused on the user (that is, the company in question) should realize that such replies do not match the requirements (the need) and will not make the cut. The best indication of the actual problem company X has is the job itself. Unless you know someone at that company, the best starting point are the nuances of job descriptions.

In the next section, we will review how to read job descriptions and how to best prepare your CV, resume or portfolio. Further, to show you hands-on examples of what kind of cover letters we really liked, you will find two examples at the end of this article.

How To Read Job Descriptions

I am not a person who ever worked in the recruitment industry per se, nor do I recruit 8 hours per day. I will cover the most important aspects seen from my perspective.

A Cover Letter — Again?

Imagine a funnel that has five steps and only allows items with a certain property to pass each step. The cover letter is part of the first step. It segments those out who are not willing to take the effort and tell why they are interested. For context, Imagine a pay-to-play game with a certain economic benefit for the winner. You would not pay up for a game if you would not think that you could win, right? Same with the cover letter. The effort you put in is the upfront payment.

We, as the hiring company, look for a match to the role we want to fill. Sounds obvious I would say. Nonetheless, we receive applications that just do not match up. The reason is twofold: First and foremost, the experience, value, and skills often don’t match. Second, if an applicant does not send a proper introduction, resume or portfolio, how can we tell whether experience and skill set match?

Consider the addressee of your application or portfolio. (Icon credit Freepik) (Large preview) Who Is The Addressee?

We talked about that the company you apply to equals the user you would design for, but there is a more nuanced perspective to this. If you consider a typical company, how many people would look at your application and in what order?

  • A recruiter or HR person;
  • The domain expert, e.g. Senior Designer or Design Director;
  • The CEO or department head;
  • Others.

To whom are you about to send the initial application? Very often that person is a recruiter. What is their expertise, UX or recruitment? Exactly. Be aware who will see your portfolio first and consider what the receivers expertise is. In our case, we don’t have a full-time recruiter on staff. Therefore, an application is likely to arrive in my inbox.

A report by The Ladders indicates that recruiters spend about 4-5 minutes per resume (self-reported data). The actual study though finds that recruiters spend 6 seconds reviewing an individual resume! I assume the reason is to some extent that they just get so many resumes. Why do they get so many? Well, I think that this, in turn, is due to fact that people apply at way too many jobs that do not match. Mind that the study does not indicate in what industry the recruiters work. Interesting to note is that the study also suggests that standardly formatted resumes reduce cognitive load and are easier to read (hard to tell whether that has equal weight in the design industry).

A recruiter, in most cases, cannot tell whether your portfolio work is stellar or not, nor do they aspire to. Recruiters manage the process from start to finish. They start with an apparently short review of your resume or CV. They look for matches between role and resume: the better your resume matches the job description, the higher your chances.

You have two options: Pick jobs that match your resume, or prepare the resume so that it matches the job description. The former is certainly less work and yields the best results in my experience.

Quick Portfolio How-To

But what about your portfolio? It’s pretty much the same thing. Everyone unconsciously understands that. Why would you send an application for a visual design role when you are a user researcher? Still, some people do for reasons I cannot understand. Aren’t we in the business of solving user problems? Who are the users and what are their problems?

Moreover, a recruiter is a human being. What does a human being without domain expertise perceive when they review portfolios? Visuals, of course (even if unconsciously). Everyone can tell whether some work or a portfolio looks properly done or not. Therefore, make sure to include great visuals even if you apply to non-visual design roles, for example. If you are not great with visuals, browse around and look for portfolios you like and then mimic what you see.

On the other hand, the domain expert might see your portfolio first. In such a case, get right to the point. Neat visuals are always a good idea because they also tell the viewer that you know how to structure the content for communication purposes. Don’t get me wrong, content matters most. You need to be able to get the right message across that is catered to the job in question.

If you are about to re-do your portfolio or just want to improve it, look for your dream job and its description for clues. Ideally, gather a bunch of them and then compare. Create a checklist of important needs and requirements across jobs you’ve found. Based on the checklist, start to structure content to build up your portfolio as best possible. Then take a step back and see how you can design the content to that it tells the story. That process can be the sure-fire way to get your application past recruiters and into the hands of the decision maker.

The Market Drives Everything

I once read an article from a founder who had just raised funding. He wrote about his experience interacting with CVs and wrote:

The magic hand of markets. (Large preview)

Why is that? As far as I know, no fundamental law of nature exists that a product has to be great (leaving aside the subjective meaning of 'great').

The reason is that a customer uses a product not because it’s “great” but because it solves their problem (similarly with a new hire). I would even argue that the market drives (almost) everything. For example, a funded company can hire more people faster.

Why does it matter you wonder? I am not suggesting to have a less than stellar design portfolio nor bad code. You don’t know with whom you are in competition with for a role at company X. So, I urge you to consider the dynamics and the strength of the market or opportunity (the company pursues) for which you indirectly sign up for (in case you get the job).

When to join a company: the sweet spot is when the market is not yet hot. (Large preview)

First, pick companies that solve real user problems. Remember MySpace and Twitter in the early days? Their web and mobile experience were way less than stellar but users did not care. On the flip side, companies that do not solve real problems will fade and vanish. Along the slow decline, raising that next round of funding will be tougher, team morale will turn sour, employees can feel that product stickiness will just not happen.

Second, use market dynamics to your advantage. Consider applying at a company that is pursuing an opportunity in new markets (for in-house positions generally). In regard to a design studio or agency, this would imply that the studio itself has positioned itself as a firm that helps companies in new markets. Remember that to a huge extent the market drives the success of that studio, not because they have such a great process.

A company without an in-house designer or design team might be on the lookup for such a person. Look for the sweet spot. That is, a market that is in its infancy, e.g. blockchain, VR, unmanned travel. Of course though, those companies are harder to spot and riskier than established ones.

Markets that are not yet mainstream are not sexy to the early-to-late majority crowd. The result is such that vacancies at companies in unknown markets do not have as much competition (around 1896 in the chart).

The red line shows the adoption of cars. The blue line levels out at 3 car companies (US data only, courtesy of Horace Dediu at Smashing Conference Barcelona 2017). (Large preview)

Third, a result of the above is that older markets consist of only a handful of established companies (around 1935 in the chart). These are the ones that were and are strong enough to fight and win the battle of competition. These companies are established, hence, competition for jobs is fierce.

One last thing I’d like to point out concerning the market: Go where the action is (i.e. “Go where the puck will be, not where it is right now”). If you are into Fintech, go to Frankfurt, London or NYC. Into movies? Go to Los Angeles or Munich. And most importantly, go where the clients are.

Some may argue that with chat and video conferencing tools, does it matter whether the competition is in Berlin or atop a mountain in Switzerland? I would argue that it does. As a local, serendipity will also come to your advantage (tough to mimic that as a remote freelancer). Being able to go out and network offline (in hubs like Berlin), gives you a competitive edge over the myriad of freelancers in Bali.

“Hello, I Am Awesome”

Know where you stand and know what matters where you want to go. This is crucial and saves you a look of effort, hassle, and pain.

Skills of interns compared with those of Chief Design Officers. (Large preview)

For example, for a young designer who is about to start her career, hard skills matter. The higher she advances in her career, the importance of hard skills will decrease and that of soft skills will increase, e.g. taking things less personal, leading teams, being able to resolve conflicts, giving sincere feedback and productive criticism, and the like.

How Do You Know Where You Stand? Ask!

Last weekend, a colleague of mine whom I had met six months ago for the first time, asked me to touch base with him. He wanted to talk about his portfolio and how it could improve. He wanted to know where he stands.

Ask more senior people in your current company for feedback. Reach out to colleagues of colleagues or friends that are more senior and in the same industry as you. And then, do not ask for hard skills only — also inquire about your soft skills. Apart from getting feedback for you to act on, the kind of inquiry also shows that you are humble and open for feedback.

Ask feedback about what you do not so well. Be persistent. People have learned from experience that their counterparts don’t like to receive negative feedback. So, you have to push to elicit this kind.

The earlier you are aware of such behavioral pitfalls, the better it will be for you. I have learned that the hard way myself. Not that I was not asking about soft skills but rather that when I made mistake here and there, people hardly ever told me. So when I asked people, they told me (if they had experienced anything, of course).

I Am Awesome. Of Course.

Be aware that practically everyone says the same about themselves: I am awesome. Although cover letters are not 100% the same, of course, they very much rhyme in many aspects. The majority of people think that they do great work, they want to learn, grow and join a great company.

The typical application HR receives: I am awesome! Of course you are. But so are all others. Now what? (Large preview) So, How Do You Distinguish Yourself?

Do not tell, but show! And don’t talk about what you want but how you could help.

In terms of UX or design in general, recruiters expect a portfolio. But then again, every designer does have a “great” portfolio of some sort. Now what? This is how you can distinguish yourself further:

  • Organize or speak
    This extends your network and makes your name known across borders.
  • Write
    Like what I'm doing here.
  • Volunteer
    At a conference, for example.
  • Go the extra mile
    See the points above; go to meetups after work, ask the hard questions, ask peers how you can improve, follow up after rejections (this is a hard one, I know, but how could you get feedback otherwise?)
  • Network frequently
    Too often, this is underestimated.
Don’t expect any other applicant to be less awesome than you are. (Large preview)

These activities show — and this is most important for a recruiter/company — that you are interested in a topic above your day job (that pays the bills). This is hardly new, but why does this work?

Companies want to get a good deal, and receive extra value for free (everyone wants to have something for free, right). What is a good deal? A good deal is either very cheap in economic terms or adds value on top (that comes for free). Companies do perceive the aforementioned activities as added value. For example, a colleague of mine runs a design company in Munich. One of his employees is part of a jury of a well-known design prize in Germany. The company perceives this as added value (e.g. they can use it for ads, and this promotes their business indirectly).

Networking: How I Received 35 Introductions

Networking is important, everybody understands that. And this is where it ends. You may also understand that you have to give first and don’t expect anything in return, immediately. Sounds easy but isn’t. It is effort, unfortunately.

A good colleague of mine, Tony, told me years ago that you have to build your network when you do not need it. As Stephen Covey said some time ago, “Always start with the end in mind.” In order to show you (remember, “Don’t tell”) how that worked for me, here is a short job hunting story.

35 Introductions In Two Weeks

I spent a couple of weeks in San Francisco in March of 2011 (for context: I am originally from Germany, where I have spent about 50% of my career, and currently reside in Berlin). While there, I networked as best as possible, collecting as many contacts as I could and made sense. I already had a network in California because I had lived in Los Angeles back in 2006.

I decided to make a return trip to San Francisco in September to hunt for a job. Prior to my trip, I reached out to the connections I had made in March as well as any other friends and colleagues already in my network.

Job hunting in San Francisco: 79.5% of colleagues returned an introduction. (Large preview)

In total, I had asked about 44+ people for an introduction to colleagues in their network. Most of those 44+ were acquaintances, though a handful I knew better. Up until the first week in September, I had received 35 introductions (thanks again if you, dear reader, had been one of them).

A couple of things that are noteworthy: First, I did not know these 44+ people well. In most cases, I did not give first, that is, I did not ask how I could help before asking for help myself. However, I did earnestly convey that I would go to length to reciprocate the favor. What made the difference for me was that I was persistent. I tracked each conversation or request for an introduction and followed up if I had not gotten an intro, a reply or else.

Out of those 35, I managed to get 5 interviews at the likes of Amazon, Grockit, and Evernote. I did not manage to get a job at the time because the H1B visa quota filled up fast and unexpectedly in mid-September. This left me practically without a chance to get a visa (before even having had all interviews).

Here is what I do when I meet new people: I write down their full name, email and/or phone number. I make a note about what the person does and what we had talked about. I add a note like “May 18, 2018, what does the person do, where does s/he live”, and who did the introduction.

Furthermore, I try to find out what the person needs or wants to achieve and then offer to put them in touch with someone in my network. What generally helps tremendously is to have a good long-term memory of people and their needs, and the desire to help. Lastly, I connect on LinkedIn in order to stay up to date about what colleagues do and need.

Don’t Forget: Give first and don’t expect anything in return.

From Opportunities To Job Offers

Get yourself a neat Kanban board (a set of columns where tasks move from left to right) with Trello or Asana, for example (any board suffices). There is really no excuse anymore for anyone to not be able to track each introduction, job position or next action.

A simple Kanban board (here from Asana.com) will hold you accountable. (Large preview)

Set up four columns and name them as the following:

  • Opportunities
  • Introductions
  • Application sent
  • Interviews/Offers
Opportunities

All opportunities go here, whether you found a vacancy online or were told by a friend to have a look at a company.

Introductions

The name says it all. For each vacancy that interests you, research whether you know someone or whether a colleague/friend of yours knows a person at the company. Once you’ve found a connection, kindly ask for an introduction. Keep in mind that an introduction usually will take at least a week. Beware that some people may not even know a person in question. Thus, send +1 requests for introductions.

Asking For An Introduction

Do not send a simple email such as “Please introduce me to XYZ”. In order to increase your chances, write a template like the following.

Your email template:

Hi %friend%,

I saw on %socialNetworkName% that you are connected with %personAtCompany% at %company%. They have an interesting vacancy outstanding to which I’d love to apply. I would like to ask whether you would mind introducing me to %personAtCompany% (if you know the person well enough)?

To make it easy for you, I have prepared an email for you to copy and paste. In the meantime, how can I help you?

Thanks in advance,

Bye, %yourName%

PS: In case that you don’t know the person well, please let me know. Thanks.


Subject: Intro %personAtCompany% <> %yourName%

Hi %personAtCompany%,

I would like to introduce you to %yourName%. S/he saw an interesting vacancy at your company. S/he is CC’ed. I will let her/him reach out to you directly if you don’t mind.

Hope that I was able to make a worthwhile introduction.

Bye, %friend% A template for sending request for introductions that delivers. (Large preview) Application Sent

Once you receive an introduction, send your application as soon as possible AND thank your friend with a quick email. Then move the card/opportunity to the “Application Sent” column and set a date/note on it to follow up in one or two weeks.

Pro tips: See section “How To Apply” further down.

Interviews (Offers)

In practice, this column will have much fewer cards. For this reason, I put this together with Offers. Eventually, you may take one of the first offers and don’t need the Offers column anyway.

Pro tip #1: Set aside a time in your calendar to go through each column and follow-up task.

Pro tip #2: Whenever you are in touch with a person at the company, make sure to add her/him to your contact list, together with a couple of notes. If you have had more frequent interactions, feel free to connect on LinkedIn. Why? People move around companies and you never know when you may meet again.

The Math Of Job Hunting

What is your ratio of job offers to applications?

Don’t know? Well, the ratio will tell you how long you will likely be looking for a job.

It is a tough question to answer. The problem for most of us though is likely to be overconfident. We all like to see ourselves as one of the lucky few who get a decent job almost immediately. Apparently, the math doesn’t prove that assumption.

The data I was able to find in regard to the number of applicants per position is very broad. Some sources report that they receive 250 applicants per job opening, others report around 60 (data from 2014). Though, the probability that the applicant will take the offer seems to be around 89%.

Let’s take these number as the upper and lower bounds. Alas, your ratio may be between 1:60 and 1:250. Whoa! That means that you need to send out between 60 and 250 applications to get 1 job offer.

What is your ratio between a job offer and applications sent? (Large preview)

Taking the above numbers into consideration, the main question becomes how productive you really are, i.e. how many applications do you send out per week? Let’s start with 2 per week and run the numbers.

  • A ratio of 1:10 would imply that with sending 2 applications per week, it will take you 1.15 months to get an offer (10/4.33/2 = 1.15).
  • 1:60: Sending 2 applications/week, it will take you 6.93 months.
  • 1:250: Sending 2 applications/week, it will take you 28.87 months.

If you send out 2 applications per week, it will take you between 7 months and 2+ years to find a cool job. Gosh, that is a long time indeed. Alas, 2 per week doesn’t get you anywhere (unless you are one of the few).

But what about 10 applications per week?

  • 1:60: 10 applications/week, results in a job hunt that takes 1.39 months,
  • 1:250: Sending 2 applications/week, it will take you 5.77 months.

That looks much better (on first glance). Of course, sending out 10 resumes per week also implies that you have to find 10 suitable openings per week, preparing resumes and portfolio, email and cover letter, and so on.

That is decent effort. Whatever way you cut it, that is the math. Now the question is what ratio does apply to you? I strongly suggest starting with something like 1:70 (8 months for 2 applications/week or 1.6 months for 10/week). Why? Because it will instill the right motivation right at the get-go.

But here is another aspect. If you consciously search and separate the OK from the ‘Awesome’ (those that almost perfectly match your experience) jobs you find, your ratio decreases. The better the match, the better your chances are. If, say, the ratio halves to 1:35, it may just take 3–4 weeks to get this awesome job (10 applications/week). Focus and deliver for 3–4 weeks, and done!

How To Apply

In short:

  1. Always ask for an intro first (see above how to do this);
  2. Reply within 1-2 days if you have gotten the intro (attach e.g. CV);
  3. Follow up a week later;
  4. Follow up each week until you get a response.

If you do not know anyone that could connect you to the company, test the waters (not the best approach). This is why networking is so important. The more people you know, the more likely it is that you can ask someone for an introduction. The spoiler: please do not randomly invite strangers on LinkedIn. Although it does increase your reach, it won’t work well.

But here is your real edge by following the process: 99.5% (gut feel) of applicants do not get past step 2. They do not follow up.

Don’t be the 99.5%. Follow up and you leave your competition in the dust. (Large preview) Follow Up Or Die

I mean it. If you have a good task list or Kanban-like board with columns at your disposal, this will get much much easier. If you receive a rejection, take it as a learning experience. Always ask for feedback. Without feedback, you cannot grow. When you follow up, do this:

  • Reply and be kind;
  • Make it easy for the other person to say “No”;
  • Make it clear that your intention is to get feedback to be able to learn, improve and grow.
Crucial notes:
  • Follow up until you get a reply that is to your liking. I can already see your face: “I only get general HR emails.” Very often yes, but have you ever tried to follow up more than twice?
  • Be aware that companies or recruiters may not want to go into detail by email because of legal reasons. It might be worth suggesting to talk on the phone or meet face-to-face instead.
Examples Of Good Cover Letters

As I mentioned above, here are two cover letters for an interaction design role that we really liked. See the difference to those applications at the beginning?

Great cover letters focus on the need of the company and tell what an applicant achieved. (Large preview) Putting It All Together

You might remember the very first sentence of this post: Finding the right job that excites, challenges, and paves the way for a long-term and evolving design career is hard work.

The approach with the least effort is to send out a whole bunch of automated emails and CVs no matter what the job asks for. By following this approach, you would indeed consider the math of job hunting. But that’s about it. The downside is that you would need to factor in the worst ratio you are willing to accept: 1:250 but perhaps 1:300 or more.

For a moment now, consider the company who accepts an applicant with such an approach. Do they know what they are doing? Alas, when you consider the above, there is hardly another way for your new and exciting dream job: hard work. Luckily, you can plan ahead by using the math of job hunting to your advantage.

Although this article is hardly a complete 101 of job hunting, I tried to make you think out-of-the-box in regard to some crucial aspects that, in fact, few people consider. Now it’s your time to take action: Pick an aspect from above that you have not considered yet and apply the learnings to make you stand out.

Always remember that the most telling predictor of how user-focused a designer you are, is how you see the company you apply to: the company is the user.

(ah, ra, yk, il)
Categories: Web Design

Meet Smashing Book 6: New Frontiers In Web Design

Wed, 06/13/2018 - 03:00
Meet Smashing Book 6: New Frontiers In Web Design Meet Smashing Book 6: New Frontiers In Web Design Vitaly Friedman 2018-06-13T12:00:09+02:00 2018-06-14T13:28:26+00:00

It is about time to finally make sense of all the front-end and UX madness, isn't it? Meet Smashing Book 6 with everything from design systems to accessible single-page apps, CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs & responsive art direction. And you can add your name into the book, too. About the book ↓.

Smashing Book 6 is dedicated to the challenges and headaches that we are facing today, and how to resolve them. No chit-chat, no theory: only practical, useful advice applicable to your work right away.

  • Book
  • eBook
Book$29 $39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook$14.90 $19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

About The Book

With so much happening in front-end and UX these days, it’s getting really hard to stay afloat, isn’t it? New technologies and techniques appear almost daily, and so navigating through it all in regular projects is daunting and time-consuming. Frankly, we just don’t have time to afford betting on a wrong strategy. That’s why we created Smashing Book 6, our shiny new book that explores uncharted territories and seeks to establish a map for the brave new front-end world.

You know the drill: the book isn’t about tools; it’s about workflow, strategy and shortcuts to getting things done well. Respected members of the community explore how to build accessible single-page apps with React or Angular, how to use CSS Grid Layout, CSS Custom Properties and service workers as well as how to load assets on the web in times of HTTP/2 and bloated third-party scripts.

We’ll also examine how to make design systems work in real-life, how to design and build conversational interfaces, AR/VR, building for chatbots and watches and how to bring responsive art-direction back to the web.

Print shipping in late September 2018. Hardcover + eBook. 432 pages. Written by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmueller, Harry Roberts, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon and Vitaly Friedman. Pre-order the book today.

  • Book
  • eBook
Book$29 $39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook$14.90 $19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

Why This Book Is For You

We worked hard to design the book in a way that it doesn’t become outdated quickly. That’s why it’s more focused on strategy rather than tooling. It’s about how we do things, but not necessarily the tools we all use to get there.

Table of Contents

The book contains 11 chapters, with topics ranging from design to front-end. Only practical advice, applicable to your work right away.

  • Making design systems work in real-life
    by Laura Elizabeth
  • Accessibility in times of single-page applications
    by Marcy Sutton
  • Production-ready CSS Grid layouts
    by Rachel Andrew
  • Strategic guide to CSS Custom Properties
    by Mike Riethmueller
  • Taming performance bottlenecks
    by Harry Roberts
  • Building an advanced service worker
    by Lyza Gardner
  • Loading assets on the web
    by Yoav Weiss
  • Conversation interface design patterns
    by Adrian Zumbrunnen
  • Building chatbots and designing for watches
    by Greg Nudelman
  • Cross Reality and the web (AR/VR)
    by Ada Rose Cannon
  • Bringing personality back to the web
    by Vitaly Friedman
From left to right: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Harry Roberts, Lyza Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Edwards, and yours truly.
  • Book
  • eBook
Book$29 $39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook$14.90 $19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

Download the Sample Chapter

To sneak a peek inside the book, you can download Vitaly’s chapter on bringing personality back to the web (PDF, ca. 18MB). Enjoy!

Goodie: New Frontiers In Web Design Wallpaper

To celebrate the pre-release of the book , Chiara Aliotta designed a set of mobile and desktop wallpapers for you to indulge in. Feel free to download it (ZIP, ca. 1.4MB).

Get ready for the new frontiers in web design with Chiara’s beautiful wallpaper. About The Designer

The cover was designed by the fantastic Chiara Aliotta. Chiara is an Italian award-winning designer with many years of experience as an art director and brand consultant. She founded the design studio Until Sunday and has directed the overall artistic look and feel of different tech companies and not-for-profit organizations around the world. We’re very happy that she gave Smashing Book 6 that special, magical touch.

Add Your Name To The Book

We kindly appreciate your support, and so as always, we invite you to add your name to the printed book: a double-page spread is reserved for the first 1.000 people. Space is limited, so please don’t wait too long!

A double-page spread is reserved for the first 1.000 readers. Add your name to the printed book.
  • Book
  • eBook
Book$29 $39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook$14.90 $19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

(cm)
Categories: Web Design

Building A Pub/Sub Service In-House Using Node.js And Redis

Tue, 06/12/2018 - 06:30
Building A Pub/Sub Service In-House Using Node.js And Redis Building A Pub/Sub Service In-House Using Node.js And Redis Dhimil Gosalia 2018-06-12T15:30:58+02:00 2018-06-14T13:28:26+00:00

Today’s world operates in real time. Whether it’s trading stock or ordering food, consumers today expect immediate results. Likewise, we all expect to know things immediately — whether it’s in news or sports. Zero, in other words, is the new hero.

This applies to software developers as well — arguably some of the most impatient people! Before diving into BrowserStack’s story, it would be remiss of me not to provide some background about Pub/Sub. For those of you who are familiar with the basics, feel free to skip the next two paragraphs.

Many applications today rely on real-time data transfer. Let’s look closer at an example: social networks. The likes of Facebook and Twitter generate relevant feeds, and you (via their app) consume it and spy on your friends. They accomplish this with a messaging feature, wherein if a user generates data, it will be posted for others to consume in nothing short of a blink. Any significant delays and users will complain, usage will drop, and if it persists, churn out. The stakes are high, and so are user expectations. So how do services like WhatsApp, Facebook, TD Ameritrade, Wall Street Journal and GrubHub support high volumes of real-time data transfers?

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry →

All of them use a similar software architecture at a high level called a “Publish-Subscribe” model, commonly referred to as Pub/Sub.

“In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.“

Wikipedia

Bored by the definition? Back to our story.

At BrowserStack, all of our products support (in one way or another) software with a substantial real-time dependency component — whether its automate tests logs, freshly baked browser screenshots, or 15fps mobile streaming.

In such cases, if a single message drops, a customer can lose information vital for preventing a bug. Therefore, we needed to scale for varied data size requirements. For example, with device logger services at a given point of time, there may be 50MB of data generated under a single message. Sizes like this could crash the browser. Not to mention that BrowserStack’s system would need to scale for additional products in the future.

As the size of data for each message differs from a few bytes to up to 100MB, we needed a scalable solution that could support a multitude of scenarios. In other words, we sought a sword that could cut all cakes. In this article, I will discuss the why, how, and results of building our Pub/Sub service in-house.

Through the lens of BrowserStack’s real-world problem, you will get a deeper understanding of the requirements and process of building your very own Pub/Sub.

Our Need For A Pub/Sub Service

BrowserStack has around 100M+ messages, each of which is somewhere between approximately 2 bytes and 100+ MB. These are passed around the world at any moment, all at different Internet speeds.

The largest generators of these messages, by message size, are our BrowserStack Automate products. Both have real-time dashboards displaying all requests and responses for each command of a user test. So, if someone runs a test with 100 requests where the average request-response size is 10 bytes, this transmits 1×100×10 = 1000 bytes.

Now let’s consider the larger picture as — of course — we don’t run just one test a day. More than approximately 850,000 BrowserStack Automate and App Automate tests are run with BrowserStack each and every day. And yes, we average around 235 request-response per test. Since users can take screenshots or ask for page sources in Selenium, our average request-response size is approximately 220 bytes.

So, going back to our calculator:

850,000×235×220 = 43,945,000,000 bytes (approx.) or only 43.945GB per day

Now let’s talk about BrowserStack Live and App Live. Surely we have Automate as our winner in form of size of data. However, Live products take the lead when it comes to the number of messages passed. For every live test, about 20 messages are passed each minute it turns. We run around 100,000 live tests, which each test averaging around 12 mins meaning:

100,000×12×20 = 24,000,000 messages per day

Now for the awesome and remarkable bit: We build, run, and maintain the application for this called pusher with 6 t1.micro instances of ec2. The cost of running the service? About $70 per month.

Choosing To Build vs. Buying

First things first: As a startup, like most others, we were always excited to build things in-house. But we still evaluated a few services out there. The primary requirements we had were:

  1. Reliability and stability,
  2. High performance, and
  3. Cost-effectiveness.

Let’s leave the cost-effectiveness criteria out, as I can’t think of any external services that cost under $70 a month (tweet me if know you one that does!). So our answer there is obvious.

In terms of reliability and stability, we found companies that provided Pub/Sub as a service with 99.9+ percent uptime SLA, but there were many T&C’s attached. The problem is not as simple as you think, especially when you consider the vast lands of the open Internet that lie between the system and client. Anyone familiar with Internet infrastructure knows stable connectivity is the biggest challenge. Additionally, the amount of data sent depends on traffic. For example, a data pipe that’s at zero for one minute may burst during the next. Services providing adequate reliability during such burst moments are rare (Google and Amazon).

Performance for our project means obtaining and sending data to all listening nodes at near zero latency. At BrowserStack, we utilize cloud services (AWS) along with co-location hosting. However, our publishers and/or subscribers could be placed anywhere. For example, it may involve an AWS application server generating much-needed log data, or terminals (machines where users can securely connect for testing). Coming back to the open Internet issue again, if we were to reduce our risk we would have to ensure our Pub/Sub leveraged the best host services and AWS.

Another essential requirement was the ability to transmit all types of data (Bytes, text, weird media data, etc.). With all considered, it did not make sense to rely on a third-party solution to support our products. In turn, we decided to revive our startup spirit, rolling up our sleeves to code our own solution.

Building Our Solution

Pub/Sub by design means there will be a publisher, generating and sending data, and a Subscriber accepting and processing it. This is similar to a radio: A radio channel broadcasts (publishes) content everywhere within a range. As a subscriber, you can decide whether to tune into that channel and listen (or turn off your radio altogether). 

Unlike the radio analogy where data is free for all and anyone can decide to tune in, in our digital scenario we need authentication which means data generated by the publisher could only be for a single particular client or subscriber.

Basic working of Pub/Sub (Large preview)

Above is a diagram providing an example of a good Pub/Sub with:

  • Publishers
    Here we have two publishers generating messages based on pre-defined logic. In our radio analogy, these are our radio jockeys creating the content.
  • Topics
    There are two here, meaning there are two types of data. We can say these are our radio channels 1 and 2.
  • Subscribers
    We have three that each read data on a particular topic. One thing to notice is that Subscriber 2 is reading from multiple topics. In our radio analogy, these are the people who are tuned into a radio channel. 

Let’s start understanding the necessary requirements for the service.

  1. An evented component
    This kicks in only when there is something to kick in.
  2. Transient storage
    This keeps data persisted for a short duration so if the subscriber is slow, it still has a window to consume it.
  3. Reducing the latency
    Connecting two entities over a network with minimum hops and distance.

We picked a technology stack that fulfilled the above requirements:

  1. Node.js
    Because why not? Evented, we wouldn’t need heavy data processing, plus it’s easy to onboard.
  2. Redis
    Supports perfectly short-lived data. It has all the capabilities to initiate, update and auto-expire. It also puts less load on the application.
Node.js For Business Logic Connectivity

Node.js is a nearly perfect language when it comes to writing code incorporating IO and events. Our particular given problem had both, making this option the most practical for our needs.

Surely other languages such as Java could be more optimized, or a language like Python offers scalability. However, the cost of starting with these languages is so high that a developer could finish writing code in Node in the same duration. 

To be honest, if the service had a chance of adding more complicated features, we could have looked at other languages or a completed stack. But here it is a marriage made in heaven. Here is our package.json:

{ "name": "Pusher", "version": "1.0.0", "dependencies": { "bstack-analytics": "*****", // Hidden for BrowserStack reasons. :) "ioredis": "^2.5.0", "socket.io": "^1.4.4" }, "devDependencies": {}, "scripts": { "start": "node server.js" } }

Very simply put, we believe in minimalism especially when it comes to writing code. On the other hand, we could have used libraries like Express to write extensible code for this project. However, our startup instincts decided to pass on this and to save it for the next project. Additional tools we used:

  • ioredis
    This is one of the most supported libraries for Redis connectivity with Node.js used by companies including Alibaba.
  • socket.io
    The best library for graceful connectivity and fallback with WebSocket and HTTP.
Redis For Transient Storage

Redis as a service scales is heavily reliable and configurable. Plus there are many reliable managed service providers for Redis, including AWS. Even if you don’t want to use a provider, Redis is easy to get started with.

Let’s break down the configurable part. We started off with the usual master-slave configuration, but Redis also comes with cluster or sentinel modes. Every mode has its own advantages.

If we could share the data in some way, a Redis cluster would be the best choice. But if we shared the data by any heuristics, we have less flexibility as the heuristic has to be followed across. Fewer rules, more control is good for life!

Redis Sentinel works best for us as data lookup is done in just one node, connecting at a given point in time while data is not sharded. This also means that even if multiple nodes are lost, the data is still distributed and present in other nodes. So you have more HA and less chances of loss. Of course, this removed the pros from having a cluster, but our use case is different.

Architecture At 30000 Feet

The diagram below provides a very high-level picture of how our Automate and App Automate dashboards work. Remember the real-time system that we had from the earlier section?

BrowserStack’s real-time Automate and App Automate dashboards (Large preview)

In our diagram, our main workflow is highlighted with thicker borders. The “automate” section consists of:

  1. Terminals
    Comprised of the pristine versions of Windows, OSX, Android or iOS that you get while testing on BrowserStack.
  2. Hub
    The point of contact for all your Selenium and Appium tests with BrowserStack.

The “user service” section here is our gatekeeper, ensuring data is sent to and saved for the right individual. It is also our security keeper. The “pusher” section incorporates the heart of what we discussed in this article. It consists of the usual suspects including:

  1. Redis
    Our transient storage for messages, where in our case automate logs are temporarily stored.
  2. Publisher
    This is basically the entity that obtains data from the hub. All your request responses are captured by this component which writes to Redis with session_id as the channel.
  3. Subscriber
    This reads data from Redis generated for the session_id. It is also the web server for clients to connect via WebSocket (or HTTP) to get data and then sends it to authenticated clients.

Finally, we have the user’s browser section, representing an authenticated WebSocket connection to ensure session_id logs are sent. This enables the front-end JS to parse and beautify it for users.

Similar to the logs service, we have pusher here that is being used for other product integrations. Instead of session_id, we use another form of ID to represent that channel. This all works out of pusher!

Conclusion (TLDR)

We’ve had considerable success in building out Pub/Sub. To sum up why we built it in-house:

  1. Scales better for our needs;
  2. Cheaper than outsourced services;
  3. Full control over the overall architecture.

Not to mention that JS is the perfect fit for this kind of scenario. Event loop and massive amount of IO is what the problem needs! JavaScript is magic of single pseudo thread. 

Events and Redis as a system keep things simple for developers, as you can obtain data from one source and push it to another via Redis. So we built it.

If the usage fits into your system, I recommend doing the same!

(rb, ra, il)
Categories: Web Design

How To Turn Your Users Into Advocates

Tue, 06/12/2018 - 03:15
How To Turn Your Users Into Advocates How To Turn Your Users Into Advocates Nick Babich 2018-06-12T12:15:44+02:00 2018-06-14T13:28:26+00:00

(This article is kindly sponsored by Adobe.) As businesses become more consumer-oriented, competition grows fiercer. Thousands of companies worldwide are struggling each day to gain more market share and to win over new consumers. A significant number of companies concentrate only on acquiring new customers — they allocate enormous marketing budgets trying to strengthen their customer base. But acquiring new customers only becomes harder and more expensive. According to the 2017 Digital Advertising Report by Adobe, ad costs are seeing growth five times faster than US inflation rates.

Cost of advertising increase from 2014 to 2016 in the US. (Image source)

In an attempt to find new customers, companies often forget to think of ways to engage with existing users. However, acquiring a new customer is anywhere from 5 to 25 times more expensive than retaining an existing one.

To succeed in the modern market, companies need to do more than produce an excellent product or provide reliable service: They need to turn their faithful users into advocates.

In this article, I’m going to discuss:

  • who are product advocates,
  • actionable ways to turn your customers into brand advocates,
  • what to consider when creating a strategy for advocacy.
Who Are Product Advocates?

Brand advocates are people who feel so positively about a brand that they want to recommend it to others. They’re often called volunteer marketers because they pass on positive word-of-mouth messages about the brand to other people (both offline and online). Advocates do it organically — money is not the primary reason why they promote a brand or product; they promote it because they truly believe in the brand.

Why Advocacy Is Great

Who sells your products or services? You might think it the sole responsibility of the sales and marketing team. Yes, for a long time, sales and marketing was the team responsible for product growth, but the situation has changed. Your customers have quickly become the most critical people to sell what you’re offering. More specifically, your customers have become keen advocates for your product or service. Advocates can be a key part of growing your customer base:

  • Organic promotion
    Brand advocacy is the modern form of traditional word-of-mouth marketing. And word of mouth about a product or service is one of the most powerful forms of advertising; when regular people recommend a product, their message carries more weight than a paid advertisement. According to a McKinsey study, word of mouth can generate more than double the sales of paid advertising.
  • Authentic reviews and testimonials
    Social proof plays a vital part in the process of product selection. Reading reviews and testimonials is the first step potential users make when researching a product; reviews and testimonials play a role in the wisdom of the crowd. And advocates can be excellent sources of reviews and testimonials. According to Google, 19% of brand advocates share their experiences online in their networks — twice as many as non-brand advocates.
  • Brand awareness
    Advocates use the power of social channels to amplify a brand’s exposure. As a result, they can reach out to people you might not have considered.
  • Valuable customer feedback loops
    Advocates can provide valuable customer insights. Their insights can help you formulate more focused, customer-centric product road maps.
Loyalty And Advocacy Are Not The Same Thing

Many people confuse loyalists and brand advocates. Brand loyalists and advocates aren’t the same groups of customers. Loyal customers are people who stay with your brand. For example, if you run an e-commerce store, loyal customers will be your return buyers. But they might not actively promote your brand to others (i.e. they might not be comfortable with sharing information about your brand publicly).

Advocates, on the other hand, are people who not only are loyal to your brand, but also proactively talk up and advocate for your company to their own networks. The word “proactive” is key here. Advocates invest in the success of your brand heavily. The goal is to turn brand loyalists into brand advocates.

Who Has The Potential To Become A Brand Advocate?

Your existing customers are the most apparent advocates for your brand. Let’s define the groups of existing users who likely to be interested in a brand advocacy program:

  • Promoters
    Promoters are people who participate in an NPS survey, a single-question survey that sounds like, “On a scale of 0 to 10, how likely are you to recommend us to your friends, family, or colleagues?”, and who answers 9 or 10.
  • Referrers
    These are existing customers who refer new users to your product.
  • Repeat visitors
    Repeat visitors are highly engaged and interested in the content you provide.
  • Social sharers
    These are people who share your content on social media on a regular basis.
  • Critics
    Critics leave feedback about your product or service.

However, your customers are not your only advocates. The best brand advocates are people who work with you: your employees. Communications marketing firm Edelman found that 52% of consumers view employees as very credible sources of information about a brand.

How To Encourage Advocacy

Getting customers to advocate for a brand is a lot different from getting them to buy products or services. Users don’t become advocates without reason. To acquire a brand ambassador, companies need to create the conditions that generate not only happy customers, but true customer advocates.

Don’t Try To Force It

Pushing people towards a particular type of action typically results in them doing the opposite. Don’t try to force advocacy; it should be completely natural.

Create A Delightful UX

Designing for the user experience has a lot more to it than making a product usable. It’s also important to generate a certain positive emotional effect while people are using a product. After all, user experience is about how users feel when they interact with a product. As humans, we establish some sort of an emotional connection with all of the products we use. It’s possible to establish a deeper connection with a product by adding elements that generate positive emotions at multiple points along that journey.

Pleasure is at the top of Aaron Walter’s pyramid of emotional design. Designers should have a goal to please their users and make them feel happy when they use the product.

The reward for brands that connect with customers’ emotions in a positive way can be substantial. People love to talk about products that make them happy.

Duolingo is an excellent example of incorporating delight in UX. What makes Duolingo thrive is its smooth functionality wrapped in a friendly design with elements of gamification. Each lesson is presented as a challenge to the user. When users accomplish a task, Duolingo celebrates this progress with the users by rewarding them with a badge. By presenting the learning process as a challenge, the service creates a sense of development and accomplishment. The latter has a significant impact on delight.

Evoking a positive emotional response in users is key to creating a delightful UX. Duolingo transforms the task of learning a new language into an inviting experience. This motivates users to level up and achieve mastery in the discipline. Focus On Building Trust

Advocacy is always a risky business. When discussing a company, advocates are putting their reputation on the line. They know that if something goes wrong, people will blame them for it. But one thing can alleviate those fears: trust. The more they trust you, the more easily they will recommend your product.

Below are a few things that play a significant role in building trust.

Stand By What You Offer

Deliver what you promise, and promptly solve problems when something goes wrong. That’s the obvious starting point, but you’d be surprised at how many fail to execute well on this simple principle.

Casper, an e-commerce company that sells sleep products online, is an excellent example of a company that exemplifies trust. Ordering a mattress on the Internet isn’t a simple thing. A customer might try a product and find that it’s not good for them. The company understands this and offers an extended trial period (customers can test a product for 100 nights) and an incredibly lenient return policy. By making returns as simple as possible, Casper makes the process of ordering a mattress as comfortable as possible. Casper not only stands by its products, but also trusts its customers to be honest when requesting a refund.

Make It Easy To Reach You

When customers interact with a brand, they expect to have a dialog, not a monologue. They want you to listen to them and demonstrate that you care about them as individuals. This is especially important when users face problems. Users should be able to reach a company through whichever channel is most convenient to them at the time. Whether they prefer face-to-face communication, email, a phone call or a message in a social network, make sure you’re available by all those means.

Ask For Feedback

Asking users for feedback not only is one of the best ways to gain insight into your business, but is also a great way to build relationships. When you ask users for feedback, they understand that you actually care about them and want to make their experience better.

However, the way you ask for feedback plays a vital role in how users react to it. Generic surveys with questions like, “Are you happy with our service? Answer yes or no” won’t deliver many insights. You need to research users problems first, get to know what is bothering them, and only after that ask questions that your users will be happy to answer.

DigitalOcean makes users feel that their opinions carry weight. Encourage Your Customers To Talk About You

Despite the digital world constantly changing, one trend remains the same: When it comes to evaluating a new product or service, potential clients trust the advice and expertise of existing clients. To build trust, you need to encourage users to talk about you. Here are a few things to remember when asking users for a review:

  • Find the right time to ask for a review. The request for a review should be a natural part of the customer journey.
Booking.com makes asking for feedback a natural part of the user journey. When Booking.com users check out at a hotel, the service asks them to review their stay.
  • Focus on quality, not quantity. Stay away from reviews and testimonials that praise the product. “Amazing product, highly recommended” doesn’t say much to potential customers. Prioritize testimonials that have context and that tell a story. This testimonial from Amazon illustrates exactly what I mean:
Product reviews can act as social proof and encourage prospects to convert. The best reviews not only describe the pros and cons of a product, but tell a story of how the product benefits the user. Offer A Loyalty Program

A loyalty program is a tried-and-true technique to show users your gratitude. As mentioned above, loyalty and advocacy aren’t the same thing. Still, a loyalty program can be used to increase the number of brand advocates:

  • Beat negative experience.
    A loyalty program might come in handy when users face a problem and complain about it. Of course, it’s essential to respond to the user request and provide a solution to the problem as fast as you can. But once the issue has been resolved, you can offer the customer loyalty points as an apology. This might help you to win back frustrated users, and maybe they can even advocate for your brand.
  • Encourage social activity.
    Motivate users to participate in social activities. For example, reward users by awarding loyalty points every time they tweet or post to Facebook, write a review, or refer their friends.
Offer A Referral Program

Running a referral program is a great way to encourage existing users to share information about your business. A successful referral program can help you achieve two key goals:

  • acquire new customers,
  • turn existing customers into brand advocates.

Moreover, studies confirm that referred customers are more valuable than customers acquired by other methods; they tend to yield higher profit margins and stay longer (they have a 16% higher lifetime value than non-referred customers), resulting in an overall higher customer lifetime value.

The critical point with a referral strategy is to find out the right incentive to make users spread the word about your product. Dropbox’s referral program is possibly one of the most famous cases of referral marketing done right. The service grew 3900% in 15 months with a simple referral program. When existing Dropbox users referred Dropbox to someone and the person signed up, both got extra free space. Apparently, Dropbox’s tremendous rise is not all due to the referral program; the service provides an excellent user experience, and the team continually improves its product. But the referral program was a great accelerator of the process of promotion.

Dropbox offered a two-sides referral program. Both advocate and referrer are rewarded for completing the desired task.

Uber is an excellent example of how a referral program baked into the service from day one can boost adoption. When Uber launched, it was quite a revolutionary service that brought the sharing economy to the transportation industry. People had to adapt to this new format of ridesharing — many potential users had doubts that stopped them from trying the new experience. The referral program was an excellent tool to alleviate fears. The incentive for participation in the program is straightforward: The service offers a free ride to both the referrer and the new rider upon a successful referral. A free ride is an excellent opportunity to get to know the service. This way, Uber gives new customers the perfect introduction to the service.

Uber’s referral program

Both Dropbox and Uber integrated the referral program very naturally into the product experience. For Dropbox users, the referral program is presented as the final step of the onboarding process — at the point when users already know what benefits the product brings to them and when they’ll be most likely to participate in the program. As for Uber, the referral program has its own option in app’s main menu.

Personalize Customer Experiences

Personalization allows brands to build deeper connections with their customers. It feels great when a product offers an experience that feels tailored especially to us. A personalized experience is what often drives a customer to say, “This is the brand for me.”

It’s possible to make the experience more personal by gathering information on customers and using it to deliver more relevant content. For example, you could have an intuitive interface that adjusts exactly the way the user expects. Netflix is an excellent example of earning loyalty based on providing a personalized experience. The service offers content suggestions based on the user’s viewing history. Netflix also notifies users when new seasons of their favorite TV shows are released.

Netflix does a great job of personalizing its mobile push notifications. Leverage The Power Of Social Media

The power of word of mouth created by brand advocates is amplified through social media. In fact, if there’s one place your company should look for brand advocates, it’s on your social media channels. Today, 70% of Americans use social media channels to engage with friends, family and the people they know. Thus, it’s essential to practice social listening — listen to what your current customers and advocates are saying about your brand — and respond to their comments accordingly.

Choose The Social Networks Most Effective To Your Business

It’s extremely important to know where your audience lives on social media and where potential advocates could have the most influence.

Carefully Choose Content To Publish

Before posting anything on social media, ask yourself two simple questions, “Does it benefit our company?” and “Does it meet our audience’s needs?” Ideally, you should post content that both reflects your business’ goals and satisfies the needs of your target audience.

Respond To User Feedback

Recognizing and responding to positive feedback is particularly important over social media. Reward the people who stand out in your community. If you have a customer who wants to engage with you, engage with them. Give them as much love as they’re giving you.

Users giving positive feedback about your brand is by far the best brand promotion. MailChimp responds to positive customer feedback on Twitter. Share User-Generated Content

One of the best ways to push customer advocacy is through user-generated content.

It’s great for brands because one piece of user-generated content can reach thousands of people within hours. And it’s great for users: Being mentioned or having content shared by a brand is really exciting for many consumers.

Airbnb is an excellent example of how user-generated content can be a vital part of a brand’s content. In the company’s Instagram account, Airbnb shares stunning photos captured by its customers. The photos include exotic locations, and this kind of content is highly attractive to prospective customers.

Sharing user content helps you get to that user’s audience. Airbnb uses such content to show off its users’ talents behind the camera. Solve User Problems

When users have a problem with a product, they often post questions or complaints on social networks in the hope of getting a quick response. It’s tremendously important to address every concern users have about your brand. By solving their problems, you clearly demonstrate that your brand is genuinely addressing customer concerns. Just imagine the effect when you resolve an issue on Twitter, Facebook or Instagram, and the happy user shares the whole conversation with their friends and family. The benefits will be priceless. Thus, the more you interact with people and solve their issues on social media, the more value you will provide to them, and the more they will like you.

MailChimp deals with user problems on Twitter. Encourage Your Followers To Share Content

Social media are great places to run promotional campaigns. Next time you run a promotion, ask your followers to share special moments using the hash tag assigned to the campaign. Track the hash tag, and choose the most inspiring contributions. This type of sharing has three significant benefits:

  • It builds brand loyalty.
  • It brings a community together.
  • It helps you create great content relevant to your brand.
In Adobe XD’s promotional campaign on Twitter, designers share their work with Adobe XD using the hash tag #AdobeXDUIKit. Provide Social Reward

Monitor your social media channels to identify people who are frequently mentioning your brand, and reward them with personal messages or gifts.

Reward users for connecting and interacting with your brand on social media. Starbucks sent a personalized, reusable Starbucks cup to one of its loyal customers to thank her for promoting Starbucks’ products in her Instagram posts. Make Social Engagement A Natural Part Of The User Journey

Encourage your users to share their achievements in the app on social media. Every once in a while, give users a shout out by sharing their posts on your page as well. Such encouragement can play a key role in making other people do the same. Just make sure the spotlight is on their accomplishments, not your product.

Runtastic (an app that tracks the number of kilometers a user runs every day) is a great example. The app encourages users to share their run with friends on social networks. Users love to share their progress with their network because it makes them look good.

Encourage your followers to share special moments. Runtastic encourages its users to share their accomplishments on social media. Boost Employee Advocacy

Your employees can help you amplify the brand’s message. According to Weber Shandwick research, 30% of employees are deeply engaged and have a high potential to be employer advocates. Moreover, the leads generated by an employee through social networking convert 7 times more often than other leads.

Your employees know the product inside out; they are capable of providing support and answering detailed questions about the product. It’s possible to boost employee advocacy by following a few simple rules:

  • Train your employees on social sharing activities. Organize seminars to educate your employees on the importance of social sharing and how they can participate in this activity.
  • Incentivize participation in social activities. Provide benefits to frequent sharers and referrers, and acknowledge them in company events.
  • Practice co-creating content with your employees. Give your employees more opportunities to be involved with your brand by sharing their own messages that reinforce business goals.
  • Help them build their personal brand. When your employees gain enough credibility to market your company, the impact of promotion will be much higher.
Help Customers Reach Their Professional Goals

Every brand should help customers to become more experienced in what they do. One way to help your customers with their professional advancement is to provide educational opportunities. Today, many big companies are focused on creating content that will help their users. For example, Adobe offers a magnificent suite of products for designers, but it isn’t only the products that make the company recognizable; it’s the content it publishes. Adobe runs a blog that offers free in-depth educational content that helps thousands of designers create better products.

Hundreds of thousands of designers return to Adobe’s blog every month to learn more about design. Readers recognize and love the brand because the blog posts help them in what they do. Create “Wow” Moments For Your Users

One of the most effective ways to make your users happy (and turn them into brand advocates) is to surprise them — for example, with an unexpected gift. A gift doesn’t mean something expensive. It could be as simple as a handwritten note. Most users would be delighted to receive such a gift because they understand that it takes time to write a personal message. Give your customers such a surprise and they’ll want to talk about it and about, more importantly, its sender.

In today’s world of digital communication, a handwritten note stands out. Sending thank-you notes is a fantastic, and very personal, way to surprise your customers. (Image source) Things To Remember When Creating A Brand Advocacy Program

We’ve just reviewed a great list of methods to boost brand advocacy. But which methods should be applied in your case? Unfortunately, when it comes to creating a brand advocacy program, there’s no silver bullet that turns customers into enthusiastic advocates. Each company has its own unique set of requirements, and it’s impossible to provide a one-size-fits-all solution. But it is still possible to provide a few general recommendations on how to create an advocacy program.

Set A Goal

Without clear goals, your chances to engage advocates decrease significantly. Before you get started, know what you want to achieve from your advocate marketing program. What do you want advocates to do?

Choose advocacy goals that align with your overall business objectives. For example, if your top business goal is to increase conversions, then one of your top advocacy goals could be to get more high-quality referrals.

Here are a few common goals:

  • Higher brand engagement
    The number of comments, likes and mentions on your channels is a signifier of success.
  • Higher conversion rates
    Get more high-quality referrals that result in increased sales.
  • Better brand awareness
    By tracking keywords associated with your brand, you’ll know how often people mention your brand and in what context.

Quick tip: Use the S.M.A.R.T. goal-setting program to set the most effective goals possible. The goals you define should be specific, measurable, attainable, relevant and timely.

Measure The Outcome

When it comes to measuring the outcome of an advocacy program, many teams use NPS (Net Promoter Score) as a key metric. NPS is computed by asking users to answer, “How likely are you to recommend this product to a friend or relative? Rate it on a scale from 0 to 10.” The answers are then grouped into three categories:

  • Detractors: responses of 0 to 6, which indicate dissatisfaction.
  • Passives: responses of 7 or 8, which indicate moderate satisfaction.
  • Promoters: responses of 9 or 10, which indicate high satisfaction and a strong likelihood of recommendation.

The NPS is then calculated by subtracting the percentage of detractors from the percentage of promoters. The NPS can range from -100% (only detractors) to +100% (only promoters).

The Net Promoter Score (NPS) is an index ranging from -100 to 100 that measures the willingness of customers to recommend a company’s products to others.

While NPS is an excellent base level for measuring customer satisfaction and loyalty, don’t use NPS as a key performance indicator. Jared Spool provides a few valid arguments on why NPS can be considered harmful to business. Figure out the more reliable and actionable ways to measure how customers feel about your brand and its offerings.

Also, when it comes to evaluating your advocacy program, focus on measuring retention, not conversion. Customer retention refers to a business’ ability to keep a customer over a specified period of time. Your retention rate can tell you a lot about your user base.

Here are three metrics that can help you measure it:

  • Customer retention rate
    The customer retention rate indicates what percentage of customers have stayed with you over a given period of time. While there’s no standard formula for calculating a customer retention rate, Jeff Haden shares a simple way to measure it. Customer retention rate = ((CE – CN) / CS)) x 100, where CE is the number of customers at the end of a period, CN is the number of new customers acquired during a period of time, and CS is the number of customers at the start of a period of time. A business with a low customer retention rate is like a bucket of water with holes in it.
  • Customer lifetime value
    The customer lifetime value is a projection of revenue a business can expect from a customer relationship. Knowing the lifetime value of a customer will help you determine how much money you can spend on customer acquisition; it also enables you to calculate your return on investment (ROI). A customer’s acquisition costs being higher than their lifetime value will often cause problems.
Customer lifetime value (Image source)
  • Referral rate
    If a business runs a referral program, customer referrals are the ultimate proof of your advocacy program. Referral rate = number of coupons redeemed / number of coupons issued. If any user has a personal coupon they can share with friends and family, the formula can be even more straightforward: referral rate = number of coupons redeemed / total number of users.
Conclusion

Think of brand advocates as your new sales team. They have tremendous brand value, they drive awareness, and they are capable of persuading people to consider your product. By focusing your efforts on developing brand advocates, you will see an increase in your company’s growth.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

(ms, al, il)
Categories: Web Design

Once Upon A Time: Using Story Structure For Better Engagement

Mon, 06/11/2018 - 05:00
Once Upon A Time: Using Story Structure For Better Engagement Once Upon A Time: Using Story Structure For Better Engagement John Rhea 2018-06-11T14:00:52+02:00 2018-06-14T13:28:26+00:00

Stories form the connective tissue of our lives. They’re our experiences, our memories, and our entertainment. They have rhythms and structures that keep us engaged. In this article, we’ll look at how those same rhythms and structures can help us enrich and enhance the user experience.

In his seminal work Hero With A Thousand Faces, Joseph Campbell identified a structure that rings true across a wide variety of stories. He called this “The Hero’s Journey,” but his book explaining it was 300+ pages so we’ll use a simplified version of Campbell’s work or a jazzified version of the plot structure you probably learned about in elementary school:

Once upon a time... a hero went on a journey.

The ordinary world/exposition is where our hero/protagonist/person/thing/main character starts. It’s the every day, the safe, the boring, the life the hero already knows.

The inciting incident is the event or thing that pulls or (more often) pushes the hero into the story. It’s what gets them involved in the story whether they want to be or not.

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

In the rising action/preparation phase, the hero prepares (sometimes unknowingly) for the ordeal/climax which is when they go up against the villain (and prevail!).

After the hero prevails against the villain, they must return to their ordinary world and bring back the new knowledge and/or mythical object they got from/for defeating the villain.

Finally, in the Resolution, we tie up all the loose ends and throw a dance party.

We can apply this same structure to the experience of the user or — as I like to call it — the “user journey.”

  • Ordinary World
    Where the user starts (their every day).
  • Inciting Incident
    They have a problem they need solved.
  • Rising Action
    They’ve found your product/service/website and they think it might work to solve their problem, but they need to decide that this is the product/service/website will solve their problem. So in this step they gather facts and figures and feelings to determine if this thing will work. It could be deciding if the type of video game news covered on this site is the kind of news they want to consume or deciding whether this type of pen will solve their writing needs or whether the graphic design prowess of this agency can make their new website super awesome.
  • The Ordeal
    The fight to make a decision about purchasing that pen or adding that news site to your regularly checked sites or contacting that agency for a quote.
  • The Road Back
    Decision made, the road back is about moving forward with that purchase, regular reading, or requesting the quote.
  • Resolution
    Where they apply your product/service/website to their problem and it is mightily solved.

If we consider this structure as we look at user interactions, there are lots of ways we can put ourselves in the user’s shoes and optimize their experience, providing support (and sometimes a good shove) exactly when they need it.

Here are some techniques. Some apply to just one part of the User Journey while some apply to several parts at once:

Journey With Your Users

Stories take time. Movies aren’t done in two minutes; they take two hours to watch and absorb. They are a journey.

If you always only ever shout “BUY! BUY! BUY!” you may make a few quick sales, but you won’t encourage long-term loyalty. Journey with your users, and they’ll count on you when they have a problem you can solve.

InVision’s newsletter journeys with you. In this recent newsletter, they sent an article about Questlove and what we can learn from him concerning creativity. If you click through, other than the URL, the word “InVision” does not appear on the page. They’re not pushing the sale, but providing relevant, interesting content to the main audience of people who use their products. I haven’t yet been in the market for their services, but if/when I am, there won’t be much of an Ordeal or fight for approval. They’ve proven their worth as a traveling companion. They’re someone I can count on.

InVision is on a quest to have you love them.

Journeying with your users can take many forms, only one of which is content marketing. You could also build training programs that help them move from beginner to expert in using your app or site. You could add high touch parts to your sales process or specific technical support that will help you come alongside your user and their needs. In contexts of quick visits to a website you might use visuals or wording that’s down-to-earth, warm, welcoming, and feels personable to your main audience. You want to show the user they can count on you when they have a problem.

Give ‘Em A Shove

Users need an inciting incident to push them into the user journey, often more than one push. They have a lot going on in their lives. Maybe they’re working on a big project or are on vacation or their kid played frisbee with their laptop. They may have lost or never opened your first email. So don’t hesitate to send them a follow-up. Show them the difference between life without your product or service and life with it. Heroes are pushed into a story because their old life, their ordinary world, is no longer tenable given the knowledge or circumstances they now have.

Nick Stephenson helps authors sell more books (and uses the hero’s journey to think through his websites and marketing). Last fall he sent out a friendly reminder about a webinar he was doing. He gets straight to the point reminding us about his webinar, but provides value by giving us a way to ask questions and voice concerns. He also lets us know that this is a limited time offer, if we want the new life his webinar can bring we’ve got to step into the story before it’s too late.

Didn’t want you to miss out if your cat barfed on your keyboard and deleted my last email.

Give your users more than one opportunity to buy your product. That doesn’t mean shove it down their throat every chance you get, but follow up and follow through will do wonders for your bottom line and help you continue to build trust. Many heroes need a push to get them into the story. Your users may need a shove or well-placed follow up email or blaring call to action too.

Give Out Magic Swords

By now you know your users will face an ordeal. So why not pass out magic swords, tools that will help them slay the ordeal easily?

Whenever I have tried to use Amazon’s Web Services, I’ve always been overwhelmed by the choices and the number of steps needed to get something to work. A one button solution it is not.

But on their homepage, they hand me a magic sword to help me slay my dragon of fear.

The horror-stories-of-hard are false. You can do this.

They use a 1-2-3 graphic to emphasize ease. With the gradient, they also subtly show the change from where you started (1) to where you’ll end (3) just like what a character does in a story. My discussion above could make this ring hollow, but I believe they do two things that prevent that.

First, number two offers lots of 10-minute tutorials for “multiple use cases” There seems to be meat there, not a fluffy tutorial that won’t apply to your situation. Ten minutes isn’t long, but can show something substantially and “multiple use cases” hints that one of these may well apply to your situation.

Second, number three is not “You’ll be done.” It’s “Start building with AWS.” You’ll be up and running in as easy as 1, 2, 3. At step 3 you’ll be ready to bring your awesome to their platform. The building is what I know and can pwn. Get me past the crazy setup and I’m good.

Find out what your user’s ordeal is. Is it that a competitor has a lower price? Or they’re scared of the time and expertise it’ll take to get your solution to work? Whatever it is, develop resources that will help them say Yes to you. If the price is a factor, provide information on the value they get or how you take care of all the work or show them it will cost them more, in the long run, to go with a different solution.

No One is Average

So many stories are about someone specific because we can identify with them. Ever sat through a movie with a bland, “everyman” character? Not if you could help it and definitely not a second time. If you sell to the average person, you’ll be selling to no one. No one believes themselves to be average.

Coke’s recent “Share a Coke” campaign used this brilliantly. First, they printed a wide variety of names on their products. This could have backfired.

You got friends? We got their name on our product. Buy it or be a terrible friend. Your choice. (Photo by Mike Mozart from Funny YouTube, USA)

My name isn’t Natasha, Sandy or Maurice. But it wasn’t “Buy a Coke,” it was “Share a Coke.” And I know a Natasha, a Sandy, and a Maurice. I could buy it for those friends for the novelty of it or buy my name if I found it ( “John” is so uncommon in the U.S. it’s hard to find anything that has my name on it besides unidentified men and commodes.)

So often we target an average user to broaden the appeal for a product/service/website, and to an extent, this is a good thing, but when we get overly broad, we risk interesting no one.

You Ain’t The Protagonist

You are not the protagonist of your website. You are a guide, a map, a directional sign. You are Obi-Wan Kenobi on Luke’s journey to understand the force. That’s because the story of your product is not your story, this isn’t the Clone Wars (I disavow Episodes I-III), it’s your user’s story, it’s A New Hope. Your users are the ones who should take the journey. First, they had a big hairy problem. They found your product or service that solved that big hairy problem. There was much rejoicing, but if you want them to buy you aren’t the hero that saves the day, you’re the teacher who enables them to save their day. (I am indebted to Donald Miller and his excellent “Story Brand” podcast for driving this point home for me.)

Zaxby’s focuses on how they’ll help you with messages like “Cure your craving” and “Bring some FLAVOR to your next Event!” The emphasis on “flavor” and “your” is borne out in the design and helps to communicate what they do and how they will help you solve your problem. But “you”, the user, is the hero, because you’re the one bringing it to the event. You will get the high fives from colleagues for bringing the flavor. Zaxby’s helps you get that victory.

With Zaxby’s chicken YOU’re unstoppable.

Furthermore, we’re all self-centered, some more than others, and frankly, users don’t care about you unless it helps them. They only care about the awards you’ve won if it helps them get the best product or service they can. They are not independently happy for you.

At a recent marketers event I attended, the social media managers for a hospital said one of their most shared articles was a piece about the number of their doctors who were considered the top doctors in the region by an independent ranking. People rarely shared the hospital’s successes before, but they shared this article like crazy. I believe it’s because the user could say, “I’m so great at choosing doctors. I picked one of the best in the region!” Rather than “look at the hospital” users were saying “look at me!” Whenever you can make your success their success you’ll continue your success.

Celebrate Their Win

Similar to above, their success is your success. Celebrate their success and they’ll thank you for it.

Putting together any email campaign is arduous. There are a thousand things to do and it takes time and effort to get them right. Once I’ve completed that arduous journey, I never want to see another email again. But MailChimp turns that around. They have this tiny animation where their monkey mascot, Freddie, gives you the rock on sign. It’s short, delightful, and ignorable if you want to. And that little celebration animation energizes me to grab the giant email ball of horrors and run for the end zone yet again. Exactly what Mailchimp wants me to do.

Gosh, creating that email campaign made me want to curl into the fetal position and weep, but now I almost want to make another one.

So celebrate your user’s victories as if they were your own. When they succeed at using your product or get through your tutorial or you deliver their website, throw a dance party and make them feel awesome.

The Purchase Is Not The Finish Line

The end of one story is often the beginning of another. If we get the client to buy and then drop off the face of the Earth that client won’t be back. I’ve seen this with a lot of web agencies that excel in the sales game, but when the real work of building the website happens, they pass you off to an unresponsive project manager.

Squarespace handles this transition well with a “We got you” email. You click purchase, and they send you an email detailing their 24/7 support and fast response times. You also get the smiling faces of five people who may or may not, have or still work there. And it doesn’t matter if they work there or never did. This email tells the user “We’ve got you, we understand, and we will make sure you succeed.”

We’ve got your back, person-who-listened-to-a-podcast-recently and wanted to start a website.

This harkens all the way back to journeying with your user. Would you want to travel with the guy who leaves as soon as you got him past the hard part? No, stick with your users and they’ll stick with you.

The Resolution

We are storytelling animals. Story structure resonates with the rhythms of our lives. It provides a framework for looking at user experience and can help you understand their point of view at different points in the process. It also helps you tweak it such that it’s a satisfying experience for you and your users.

You got to the end of this article. Allow me to celebrate your success with a dance party.

Let the embarrassing dancing commence! (cc, ra, il)
Categories: Web Design

Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers

Thu, 06/07/2018 - 04:45
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers David Mark Clements 2018-06-07T13:45:51+02:00 2018-06-14T13:28:26+00:00

If you’ve been building anything with Node.js for long enough, then you’ve no doubt experienced the pain of unexpected speed issues. JavaScript is an evented, asynchronous language. That can make reasoning about performance tricky, as will become apparent. The surging popularity of Node.js has exposed the need for tooling, techniques and thinking suited to the constraints of server-side JavaScript.

When it comes to performance, what works in the browser doesn’t necessarily suit Node.js. So, how do we make sure a Node.js implementation is fast and fit for purpose? Let’s walk through a hands-on example.

Tools

Node is a very versatile platform, but one of the predominant applications is creating networked processes. We’re going to focus on profiling the most common of these: HTTP web servers.

We’ll need a tool that can blast a server with lots of requests while measuring the performance. For example, we can use AutoCannon:

npm install -g autocannon

Other good HTTP benchmarking tools include Apache Bench (ab) and wrk2, but AutoCannon is written in Node, provides similar (or sometimes greater) load pressure, and is very easy to install on Windows, Linux, and Mac OS X.

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry →

After we’ve established a baseline performance measurement, if we decide our process could be faster we’ll need some way to diagnose problems with the process. A great tool for diagnosing various performance issues is Node Clinic, which can also be installed with npm:

npm install -g clinic

This actually installs a suite of tools. We’ll be using Clinic Doctor and Clinic Flame (a wrapper around 0x) as we go.

Note: For this hands-on example we’ll need Node 8.11.2 or higher.

The Code

Our example case is a simple REST server with a single resource: a large JSON payload exposed as a GET route at /seed/v1. The server is an app folder which consists of a package.json file (depending on restify 7.1.0), an index.js file and a util.js file.

The index.js file for our server looks like so:

'use strict' const restify = require('restify') const { etagger, timestamp, fetchContent } = require('./util')() const server = restify.createServer() server.use(etagger().bind(server)) server.get('/seed/v1', function (req, res, next) { fetchContent(req.url, (err, content) => { if (err) return next(err) res.send({data: content, url: req.url, ts: timestamp()}) next() }) }) server.listen(3000)

This server is representative of the common case of serving client-cached dynamic content. This is achieved with the etagger middleware, which calculates an ETag header for the latest state of the content.

The util.js file provides implementation pieces that would commonly be used in such a scenario, a function to fetch the relevant content from a backend, the etag middleware and a timestamp function that supplies timestamps on a minute-by-minute basis:

'use strict' require('events').defaultMaxListeners = Infinity const crypto = require('crypto') module.exports = () => { const content = crypto.rng(5000).toString('hex') const ONE_MINUTE = 60000 var last = Date.now() function timestamp () { var now = Date.now() if (now — last >= ONE_MINUTE) last = now return last } function etagger () { var cache = {} var afterEventAttached = false function attachAfterEvent (server) { if (attachAfterEvent === true) return afterEventAttached = true server.on('after', (req, res) => { if (res.statusCode !== 200) return if (!res._body) return const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') const etag = crypto.createHash('sha512') .update(JSON.stringify(res._body)) .digest() .toString('hex') if (cache[key] !== etag) cache[key] = etag }) } return function (req, res, next) { attachAfterEvent(this) const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') if (key in cache) res.set('Etag', cache[key]) res.set('Cache-Control', 'public, max-age=120') next() } } function fetchContent (url, cb) { setImmediate(() => { if (url !== '/seed/v1') cb(Object.assign(Error('Not Found'), {statusCode: 404})) else cb(null, content) }) } return { timestamp, etagger, fetchContent } }

By no means take this code as an example of best practices! There are multiple code smells in this file, but we’ll locate them as we measure and profile the application.

To get the full source for our starting point, the slow server can be found over here.

Profiling

In order to profile, we need two terminals, one for starting the application, and the other for load testing it.

In one terminal, within the app, folder we can run:

node index.js

In another terminal we can profile it like so:

autocannon -c100 localhost:3000/seed/v1

This will open 100 concurrent connections and bombard the server with requests for ten seconds.

The results should be something similar to the following (Running 10s test @ http://localhost:3000/seed/v1 — 100 connections):

Stat Avg Stdev Max Latency (ms) 3086.81 1725.2 5554 Req/Sec 23.1 19.18 65 Bytes/Sec 237.98 kB 197.7 kB 688.13 kB 231 requests in 10s, 2.4 MB read

Results will vary depending on the machine. However, considering that a “Hello World” Node.js server is easily capable of thirty thousand requests per second on that machine that produced these results, 23 requests per second with an average latency exceeding 3 seconds is dismal.

Diagnosing Discovering The Problem Area

We can diagnose the application with a single command, thanks to Clinic Doctor’s –on-port command. Within the app folder we run:

clinic doctor --on-port=’autocannon -c100 localhost:$PORT/seed/v1’ -- node index.js

This will create an HTML file that will automatically open in our browser when profiling is complete.

The results should look something like the following:

Clinic Doctor results

The Doctor is telling us that we have probably had an Event Loop issue.

Along with the message near the top of the UI, we can also see that the Event Loop chart is red, and shows a constantly increasing delay. Before we dig deeper into what this means, let’s first understand the effect the diagnosed issue is having on the other metrics.

We can see the CPU is consistently at or above 100% as the process works hard to process queued requests. Node’s JavaScript engine (V8) actually uses two CPU cores in this case because the machine is multi-core and V8 uses two threads. One for the Event Loop and the other for Garbage Collection. When we see the CPU spiking up to 120% in some cases, the process is collecting objects related to handled requests.

We see this correlated in the Memory graph. The solid line in the Memory chart is the Heap Used metric. Any time there’s a spike in CPU we see a fall in the Heap Used line, showing that memory is being deallocated.

Active Handles are unaffected by the Event Loop delay. An active handle is an object that represents either I/O (such as a socket or file handle) or a timer (such as a setInterval). We instructed AutoCannon to open 100 connections (-c100). Active handles stay a consistent count of 103. The other three are handles for STDOUT, STDERR, and the handle for the server itself.

If we click the Recommendations panel at the bottom of the screen, we should see something like the following:

Viewing issue specific recommendations Short-Term Mitigation

Root cause analysis of serious performance issues can take time. In the case of a live deployed project, it’s worth adding overload protection to servers or services. The idea of overload protection is to monitor event loop delay (among other things), and respond with “503 Service Unavailable” if a threshold is passed. This allows a load balancer to fail over to other instances, or in the worst case means users will have to refresh. The overload-protection module can provide this with minimum overhead for Express, Koa, and Restify. The Hapi framework has a load configuration setting which provides the same protection.

Understanding The Problem Area

As the short explanation in Clinic Doctor explains, if the Event Loop is delayed to the level that we’re observing it’s very likely that one or more functions are “blocking” the Event Loop.

It’s especially important with Node.js to recognize this primary JavaScript characteristic: asynchronous events cannot occur until currently executing code has completed.

This is why a setTimeout cannot be precise.

For instance, try running the following in a browser’s DevTools or the Node REPL:

console.time('timeout') setTimeout(console.timeEnd, 100, 'timeout') let n = 1e7 while (n--) Math.random()

The resulting time measurement will never be 100ms. It will likely be in the range of 150ms to 250ms. The setTimeout scheduled an asynchronous operation (console.timeEnd), but the currently executing code has not yet complete; there are two more lines. The currently executing code is known as the current “tick.” For the tick to complete, Math.random has to be called ten million times. If this takes 100ms, then the total time before the timeout resolves will be 200ms (plus however long it takes the setTimeout function to actually queue the timeout beforehand, usually a couple of milliseconds).

In a server-side context, if an operation in the current tick is taking a long time to complete requests cannot be handled, and data fetching cannot occur because asynchronous code will not be executed until the current tick has completed. This means that computationally expensive code will slow down all interactions with the server. So it’s recommended to split out resource intense work into separate processes and call them from the main server, this will avoid cases where on rarely used but expensive route slows down the performance of other frequently used but inexpensive routes.

The example server has some code that is blocking the Event Loop, so the next step is to locate that code.

Analyzing

One way to quickly identify poorly performing code is to create and analyze a flame graph. A flame graph represents function calls as blocks sitting on top of each other — not over time but in aggregate. The reason it’s called a ‘flame graph’ is because it typically uses an orange to red color scheme, where the redder a block is the “hotter” a function is, meaning, the more it’s likely to be blocking the event loop. Capturing data for a flame graph is conducted through sampling the CPU — meaning that a snapshot of the function that is currently being executed and it’s stack is taken. The heat is determined by the percentage of time during profiling that a given function is at the top of the stack (e.g. the function currently being executed) for each sample. If it’s not the last function to ever be called within that stack, then it’s likely to be blocking the event loop.

Let’s use clinic flame to generate a flame graph of the example application:

clinic flame --on-port=’autocannon -c100 localhost:$PORT/seed/v1’ -- node index.js

The result should open in our browser with something like the following:

Clinic’s flame graph visualization

The width of a block represents how much time it spent on CPU overall. Three main stacks can be observed taking up the most time, all of them highlighting server.on as the hottest function. In truth, all three stacks are the same. They diverge because during profiling optimized and unoptimized functions are treated as separate call frames. Functions prefixed with a * are optimized by the JavaScript engine, and those prefixed with a ~ are unoptimized. If the optimized state isn’t important to us, we can simplify the graph further by pressing the Merge button. This should lead to view similar to the following:

Merging the flame graph

From the outset, we can infer that the offending code is in the util.js file of the application code.

The slow function is also an event handler: the functions leading up to the function are part of the core events module, and server.on is a fallback name for an anonymous function provided as an event handling function. We can also see that this code isn’t in the same tick as code that actually handles the request. If it was, functions from core http, net and stream modules would be in the stack.

Such core functions can be found by expanding other, much smaller, parts of the flame graph. For instance, try using the search input on the top right of the UI to search for send (the name of both restify and http internal methods). It should be on the right of the graph (functions are alphabetically sorted):

Searching the flame graph for HTTP processing functions

Notice how comparatively small all the actual HTTP handling blocks are.

We can click one of the blocks highlighted in cyan which will expand to show functions like writeHead and write in the http_outgoing.js file (part of Node core http library):

Expanding the flame graph into HTTP relevant stacks

We can click all stacks to return to the main view.

The key point here is that even though the server.on function isn’t in the same tick as the actual request handling code, it’s still affecting the overall server performance by delaying the execution of otherwise performant code.

Debugging

We know from the flame graph that the problematic function is the event handler passed to server.on in the util.js file.

Let’s take a look:

server.on('after', (req, res) => { if (res.statusCode !== 200) return if (!res._body) return const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') const etag = crypto.createHash('sha512') .update(JSON.stringify(res._body)) .digest() .toString('hex') if (cache[key] !== etag) cache[key] = etag })

It’s well known that cryptography tends to be expensive, as does serialization (JSON.stringify) but why don’t they appear in the flame graph? These operations are in the captured samples, but they’re hidden behind the cpp filter. If we press the cpp button we should see something like the following:

Revealing serialization and cryptography C++ frames

The internal V8 instructions relating to both serialization and cryptography are now shown as the hottest stacks and as taking up most of the time. The JSON.stringify method directly calls C++ code; this is why we don’t see a JavaScript function. In the cryptography case, functions like createHash and update are in the data, but they are either inlined (which means they disappear in the merged view) or too small to render.

Once we start to reason about the code in the etagger function it can quickly become apparent that it’s poorly designed. Why are we taking the server instance from the function context? There’s a lot of hashing going on, is all of that necessary? There’s also no If-None-Match header support in the implementation which would mitigate some of the load in some real-world scenarios because clients would only make a head request to determine freshness.

Let’s ignore all of these points for the moment and validate the finding that the actual work being performed in server.on is indeed the bottleneck. This can be achieved by setting the server.on code to an empty function and generating a new flamegraph.

Alter the etagger function to the following:

function etagger () { var cache = {} var afterEventAttached = false function attachAfterEvent (server) { if (attachAfterEvent === true) return afterEventAttached = true server.on('after', (req, res) => {}) } return function (req, res, next) { attachAfterEvent(this) const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') if (key in cache) res.set('Etag', cache[key]) res.set('Cache-Control', 'public, max-age=120') next() } }

The event listener function passed to server.on is now a no-op.

Let’s run clinic flame again:

clinic flame --on-port='autocannon -c100 localhost:$PORT/seed/v1' -- node index.js

This should produce a flame graph similar to the following:

Flame graph of the server when server.on is an empty function

This looks better, and we should have noticed an increase in request per second. But why is the event emitting code so hot? We would expect at this point for the HTTP processing code to take up the majority of CPU time, there’s nothing executing at all in the server.on event.

This type of bottleneck is caused by a function being executed more than it should be.

The following suspicious code at the top of util.js may be a clue:

require('events').defaultMaxListeners = Infinity

Let’s remove this line and start our process with the --trace-warnings flag:

node --trace-warnings index.js

If we profile with AutoCannon in another terminal, like so:

autocannon -c100 localhost:3000/seed/v1

Our process will output something similar to:

(node:96371) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 after listeners added. Use emitter.setMaxListeners() to increase limit at _addListener (events.js:280:19) at Server.addListener (events.js:297:10) at attachAfterEvent (/Users/davidclements/z/nearForm/keeping-node-fast/slow/util.js:22:14) at Server. (/Users/davidclements/z/nearForm/keeping-node-fast/slow/util.js:25:7) at call (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/chain.js:164:9) at next (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/chain.js:120:9) at Chain.run (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/chain.js:123:5) at Server._runUse (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/server.js:976:19) at Server._runRoute (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/server.js:918:10) at Server._afterPre (/Users/davidclements/z/nearForm/keeping-node-fast/slow/node_modules/restify/lib/server.js:888:10)

Node is telling us that lots of events are being attached to the server object. This is strange because there’s a boolean that checks if the event has been attached and then returns early essentially making attachAfterEvent a no-op after the first event is attached.

Let’s take a look at the attachAfterEvent function:

var afterEventAttached = false function attachAfterEvent (server) { if (attachAfterEvent === true) return afterEventAttached = true server.on('after', (req, res) => {}) }

The conditional check is wrong! It checks whether attachAfterEvent is true instead of afterEventAttached. This means a new event is being attached to the server instance on every request, and then all prior attached events are being fired after each request. Whoops!

Optimizing

Now that we’ve discovered the problem areas, let’s see if we can make the server faster.

Low-Hanging Fruit

Let’s put the server.on listener code back (instead of an empty function) and use the correct boolean name in the conditional check. Our etagger function looks as follows:

function etagger () { var cache = {} var afterEventAttached = false function attachAfterEvent (server) { if (afterEventAttached === true) return afterEventAttached = true server.on('after', (req, res) => { if (res.statusCode !== 200) return if (!res._body) return const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') const etag = crypto.createHash('sha512') .update(JSON.stringify(res._body)) .digest() .toString('hex') if (cache[key] !== etag) cache[key] = etag }) } return function (req, res, next) { attachAfterEvent(this) const key = crypto.createHash('sha512') .update(req.url) .digest() .toString('hex') if (key in cache) res.set('Etag', cache[key]) res.set('Cache-Control', 'public, max-age=120') next() } }

Now we check our fix by profiling again. Start the server in one terminal:

node index.js

Then profile with AutoCannon:

autocannon -c100 localhost:3000/seed/v1

We should see results somewhere in the range of a 200 times improvement (Running 10s test @ http://localhost:3000/seed/v1 — 100 connections):

Stat Avg Stdev Max Latency (ms) 19.47 4.29 103 Req/Sec 5011.11 506.2 5487 Bytes/Sec 51.8 MB 5.45 MB 58.72 MB 50k requests in 10s, 519.64 MB read

It’s important to balance potential server cost reductions with development costs. We need to define, in our own situational contexts, how far we need to go in optimizing a project. Otherwise, it can be all too easy to put 80% of the effort into 20% of the speed enhancements. Do the constraints of the project justify this?

In some scenarios, it could be appropriate to achieve a 200 times improvement with a low hanging fruit and call it a day. In others, we may want to make our implementation as fast as it can possibly be. It really depends on project priorities.

One way to control resource spend is to set a goal. For instance, 10 times improvement, or 4000 requests per second. Basing this on business needs makes the most sense. For instance, if server costs are 100% over budget, we can set a goal of 2x improvement.

Taking It Further

If we produce a new flame graph of our server, we should see something similar to the following:

Flame graph after the performance bug fix has been made

The event listener is still the bottleneck, it’s still taking up one-third of CPU time during profiling (the width is about one third the whole graph).

What additional gains can be made, and are the changes (along with their associated disruption) worth making?

With an optimized implementation, which is nonetheless slightly more constrained, the following performance characteristics can be achieved (Running 10s test @ http://localhost:3000/seed/v1 — 10 connections):

Stat Avg Stdev Max Latency (ms) 0.64 0.86 17 Req/Sec 8330.91 757.63 8991 Bytes/Sec 84.17 MB 7.64 MB 92.27 MB 92k requests in 11s, 937.22 MB read

While a 1.6x improvement is significant, it arguable depends on the situation whether the effort, changes, and code disruption necessary to create this improvement are justified. Especially when compared to the 200x improvement on the original implementation with a single bug fix.

To achieve this improvement, the same iterative technique of profile, generate flamegraph, analyze, debug, and optimize was used to arrive at the final optimized server, the code for which can be found here.

The final changes to reach 8000 req/s were:

These changes are slightly more involved, a little more disruptive to the code base, and leave the etagger middleware a little less flexible because it puts the burden on the route to provide the Etag value. But it achieves an extra 3000 requests per second on the profiling machine.

Let’s take a look at a flame graph for these final improvements:

Healthy flame graph after all performance improvements

The hottest part of the flame graph is part of Node core, in the net module. This is ideal.

Preventing Performance Problems

To round off, here are some suggestions on ways to prevent performance issues in before they are deployed.

Using performance tools as informal checkpoints during development can filter out performance bugs before they make it into production. Making AutoCannon and Clinic (or equivalents) part of everyday development tooling is recommended.

When buying into a framework, find out what it’s policy on performance is. If the framework does not prioritize performance, then it’s important to check whether that aligns with infrastructural practices and business goals. For instance, Restify has clearly (since the release of version 7) invested in enhancing the library’s performance. However, if low cost and high speed is an absolute priority, consider Fastify which has been measured as 17% faster by a Restify contributor.

Watch out for other widely impacting library choices — especially consider logging. As developers fix issues, they may decide to add additional log output to help debug related problems in the future. If an unperformant logger is used, this can strangle performance over time after the fashion of the boiling frog fable. The pino logger is the fastest newline delimited JSON logger available for Node.js.

Finally, always remember that the Event Loop is a shared resource. A Node.js server is ultimately constrained by the slowest logic in the hottest path.

(rb, ra, il)
Categories: Web Design

UX Your Life: Applying The User-Centered Process To Your Life (And Stuff)

Wed, 06/06/2018 - 04:30
UX Your Life: Applying The User-Centered Process To Your Life (And Stuff) UX Your Life: Applying The User-Centered Process To Your Life (And Stuff) JD Jordan 2018-06-06T13:30:18+02:00 2018-06-14T13:28:26+00:00

Everything is designed, whether we make time for it or not. Our smartphones and TVs, our cars and houses, even our pets and our kids are the products of purposeful creativity.

So why not our lives?

A great many of us are, currently, in a position where we might look at our jobs — or even our relationships — and wonder, “Why have I stayed here so long? Is this really where I want or even need to be. Am I in a position where I can do something about it?”

The simple — and sometimes harsh — the answer is that we don’t often make intentional decisions about our lives and our careers like we do in our work for clients and bosses. Instead, having once made the decision to accept a position or enter a relationship, inertia takes over. We become reactive rather than active participants in our own lives and, like legacy products, are gradually less and less in touch with the choices and the opportunities that put us there in the first place.

Or, in UX terms: We stop doing user research, we stop iterating, and we stop meeting our own needs. And our lives and careers come less usable and enjoyable as a result of this negligence.

Thankfully, all the research, design, and testing tools we need to intentionally design our lives are easily acquired and learned. And you don’t need special training or a trust fund to do it. All you need is the willingness to ask yourself difficult questions and risk change.

Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.

Table of Contents →

You might just end up doing the work you want, having the life-work balance you need, and both of those with the time you need for what’s most important to you.

I’d be remiss if I didn’t admit, the idea of applying UX tools to my life didn’t come quickly. UX design principles are applicable to a much wider range of projects than the discipline typically concerns itself, but it was only through some dramatic personal trials that I was finally compelled to test these methods against my own life and those of my family. That is to say, though, I’m not just an evangelist for these methods, I also use them.

What does your office look like? This was a Tuesday — a workday! — after my wife and I redesigned our lives and careers and became business partners. (Large preview)

So how do you UX your life?

Below, I’m going to introduce you to four tools and techniques you can use to get started:

  1. Your Life In Weeks
    A current state audit of your past.
  2. Eisenhower Charts
    A usability assessment for your present and your priorities.
  3. Affinity Mapping
    A qualitative method for identifying — and later retrospecting on — your success metrics (KPIs).
  4. Prototyping Life
    Because you’ve got to try it before you live it.

But first...

Business As Usual: The User-Centered Design Process

Design thinking and its deliberate creative and experimental process provides an excellent blueprint for how to perform user research on yourself, create the life you need, and test the results.

This user-centered design process is nothing new. In many ways, people have been practicing this iterative process since our ancestors first talked to each other and sketched on cave walls. Call it design thinking, UX, or simply problem-solving — it’s much the same from agency to agency, department to department, regardless of the proprietary frame.

Look familiar? The design process in its simplest form. Credit: Christopher Holm-Hansen, thenounproject.com . (Large preview)

The user-centered design process is, most simply:

  1. Phase 1: Research
    The first step to finding any design solution is to talk to users and stakeholders and validate the problem (and not just respond to the reported symptoms). This research is also used to align user and business needs with what’s technically and economically feasible. This first step in the process is tremendously freeing — you don’t need to toil in isolation. Your user knows what they need, and this research will help you infer it.
  2. Phase 2: Design
    Don’t just make things beautiful — though beauty is joyful! Focus on creating solutions for the specific needs, pain-points, and opportunities your research phase identified. And remember, design is both a noun and a verb. Yes, you deliver designs for your clients, but design is — first and foremost — a process of insight, trial, and error. And once you have a solution in mind...
  3. Phase 3: Testing
    Test early and test often. When your solutions are still low-fi (before they go to development) and absolutely before they go to market, put them in front of real users to make sure you’re solving the right problems. Become an expert in making mistakes and iterating on the lessons those mistakes teach you. It’s key to producing the best solutions.
  4. Repeat

Most design-thinking literature illustrates how the design process is applied to products, software, apps, or web design. At our agency, J+E Creative, we also apply this process to graphic design, content creation, education, and filmmaking. And it’s for that reason we don’t call it the UX design process. We drop the abbreviated adjective because, in our experience, the process works just as well for presentations and parenting as it does for enterprise software.

The process is about problem-solving. We just have to turn the process on ourselves.

Expanding The Scope: User-Centered Parenting

As creatives and as the parents of five elementary-aged kiddos, one of the first places we tried to apply the design process to our lives was to the problems of parenting.

Talk about a pain point. Using UX basics to solve a parenting problem opened the door to a wider application of the process and — mercifully — saved our tender feet. (Large preview)

In our case, the kids didn’t clean up their Legos. Like, ever. And stepping on a Lego might just be the most painful thing that can happen to you in your own home. They’re all right angles, unshatterable plastic, and invariably in places where you otherwise feel safe, like the kitchen or the bathroom.

But how can you research, design, and test a parenting issue — such as getting kids to pick up their Legos — using the user-centered design process?

Research

We’re far from the first parents to struggle with the painful reality of stepping on little plastic knives. And like most parents, we’d learned threats and consequences were inadequate to the task of changing our kids’ behavior.

So we started with a current-state contextual analysis: The kid’s legos were kept in square canvas boxes in square Ikea bookcases in a room with a carpeted floor. Typically, the kids would pour the Legos out on the carpet — for the benefit of sorting through the small pieces while simultaneously incurring the pain-point that Legos are notoriously hard to clean up off the carpet.

For reals. If your product requires me to protect myself against it in my own home, the problem might be the product. Credit: BRAND STATION/LEGO/Piwee. (Large preview)

We also did a competitive analysis and were surprised to learn that, back in 2015, Lego appeared to acknowledge this problem and teamed up Brand Station to create some Lego-safe slippers. But, sadly, this was both a limited run and an impractical solution.

All users, great and small. It’s tempting to think users are paying customer or website visitors. But once you widen your perspective, users are everywhere. Even in your own home. (Large preview)

Lastly, we conducted user interviews. We knew the stakeholder perspective: We wanted the Legos to stay in their bins or — failing that — for the kids to pick them up after they were played with. But we didn’t assume we knew what the users wanted. So we talked to each of them in turn (no focus groups!) and what we found was eye opening. Of course, the kids didn’t want to pick up their Legos. It was inconvenient for play and difficult because of the carpet. But we were surprised to learn that the kids had also considered the Lego problem — they didn’t like discipline, after all — and they already had a solution in mind. If anything, like good users, they were frustrated we hadn’t asked sooner.

Design

Remember when I said, your user knows what they need?

One of our users asked us, “What about the train table with the big flat top and the large flat drawer underneath.”

Eureka.

Repurposing affordances. What works for one interaction often works for another. And with a little creativity and flexibility, some solutions present themselves. (Large preview)

By swapping the contents of the Lego bins with the train table, we solved nearly all stakeholder and user pain points in one change of platform:

  • Legos of all sizes were easy to find in the broad flat drawer.
  • The large flat surface of the train table was a better surface for assembling and cleaning up Legos than was the carpet.
  • Clean up was easy — just roll the drawer closed!
  • Opportunity bonus: It painlessly let us retire the train toys the kids had already outgrown.
Testing

No solution is ever perfect, and this was no exception. Despite its simplicity, iteration was quickly necessary. For instance, each kid claimed the entire surface of the top deck. And the lower drawer was rarely pushed in without a reminder.

But you know what? We haven’t stepped on a Lego in years. #TrustTheProcess.

The Ultimate Experience: User-Centered Living

Knowing how to apply the design process to our professional work, and emboldened from UXing our kids, we began to apply the process to something bigger — perhaps the biggest something of all.

Our lives.

This is not a plan. This is bullsh*t. (Large preview)

The Internet is full of advice on this topic. And it’s easy to confuse its ubiquitous inspirational messages for a path to self-improvement and a mindful life. But I’d argue such messages — effective, perhaps for short-term encouragement — are damaging. Why?

They feature:

  • Vague phrases or platitudes.
  • Disingenuous speakers, often without examples.
  • The implication of attainable or achieved perfection.
  • Calls for sudden, uninformed optimism.

But most damning, these messages are often too-high-level, include privileged and entitled narratives masquerading as lessons, or present life as a zero-sum pursuit reminiscent of Cortés burning his ships.

In short, they’re bullsh!t.

What we need are practical tools we can learn from and apply to our own experiences. People don’t want to find the thing they’re most passionate about, then do it on nights and weekends for the rest of their lives. They want an intentional life they’re in control of. Full time. And still make rent.

So let’s take deliberate control of our lives using the same tools and techniques we use for client work or for getting the kids to pick up their damn legos.

Content Auditing Your Past: Your Life In Weeks

The best way I’ve found to get started designing your life is to take a look back at how you’ve lived your life so far. It’s the ultimate content audit, and it’s one of the most eye-opening acts of introspection you can do.

Tim Urban introduced the concept of looking at your life in weeks on his occasional blog, Wait But Why. It’s a reflective audit of your past reduced to a graph featuring 52 boxes per row, with each box representing a week and each row, a year. And combined with a Social Security Administration death estimate, it presents a total look at the life you’ve lived and the time you have left.

You can get started right now by downloading a Your Life In Weeks template and by following along with my historical audit.

My life, circa Spring Break. Grey is unstructured time, green in education, and blue is my career (each color in tints to represent changes in schools or employers). White dots represent positive events, black dots represent negative ones. Orange dots are opportunities I can predict. Empty dots are weeks yet lived. (Large preview)

Your Life In Weeks maps the high points and low points in your life. How it’s been spent so far and what lies ahead.

  • What were the big events in your life?
  • How have you spent your time so far?
  • What events can you forecast?
  • How do you want to spend your time left?

This audit is an analog for quantifiable user and usability research techniques such as website analytics, conversion rates, or behavior surveys. The result is a snapshot of one user’s unique life and career. Yours.

Start by looking back...
  • Where and when did you go to school?
  • When did you turn 18, 21, 40?
  • When did you get your first job? When did your career begin?
  • When and where were your favorite trips?
  • When and where did you move?
  • When were your major career changes or professional events?
  • What about relationships, weddings, or breakups?
  • When were your kids born?
  • And don’t forget major personal events: health issues, traumas, success, or other impactful life changes.
Youth is wasted on the young. I spent the first few years of my life with mostly unstructured time (grey) before attending a variety of schools (shades of green) in North Carolina, Georgia, Virginia, France, and Scotland. I also moved a few times (white circles). Annotations are in the margins. (Large preview) Adulting is hard. My first summer and salaried jobs led to founding my first company and the inevitable quarter-life crisis. After graduate school, life got more complicated: I closed my company, got divorced, and dealt with a few health crises (black dots) but also had kids, got remarried, and published my first novel (white dots). (Large preview) What can you look forward to...
  • Where do you want your career to go and by when?
  • What are your personal goals?
  • Got kids? When is your last Spring Break with them? When do they move out?
  • When might you retire?
  • When might you die?
Maximize the future. Looking forward, I can forecast four remaining Spring Breaks with all my kids (as a divorcee, they’re with me every other year). I also know when the last summer vacation with all them is and when they’ll start moving out to college. (Large preview) How full is your progress bar? Social Security Administration helps forecast your death date. But don’t worry. The older you already are, the longer you’ll make it. (Large preview)

The perspective this audit reveals can be humbling but it’s better than keeping your head in the sand. Or in the cubicle. Realizing your 40th really is your midlife might be the incentive you need for real change, knowing your kids will move out in a few years might help you re-prioritize, or seeing how much time you spent working on someone else’s dream might give you the motivation to start working for your own.

When I audited myself, I was shocked by how much time I’d spent at jobs that were poor fits for me. And at how little time I had left to do something else. I was also shocked to see how little time I had left with my kids at home, even as young as they are. Suddenly, the pain of sitting in traffic or spending an evening away at work took on new meaning. I didn’t resent my past — what’s done is done and there’s no way to change it — but I did let it color how I saw my present and my future.

Usability Testing The Present: Eisenhower Charts

Once you’ve looked back at your past, it’s time to look at how you’re spending your present.

An Eisenhower chart — cleverly named for the US president and general that saved the world — is a simple quadrant graph that juxtaposes urgency (typically, the Y-axis) with importance (typically the X-axis). It helps to identify your priorities to help you focus on using your time well, not just filling it.

Put simply, this tool helps you:

  1. Figure out what’s important to you.
  2. Prioritize it.

Most of us struggle every day (or in even smaller units of time) to figure out the most important thing we need to do right now. We take inventories of what people expect from us, of what we’ve promised to do for others, or of what feels like needs tackling right away. Then we prioritize our schedules around these needs.

What’s important to you? It’s easy to get caught up in urgency — or perceived urgency — and disregard what’s important. But I often find that the most important things aren’t particularly urgent and, therefore, must be consciously prioritized. (Large preview)

Like a feature prioritization exercise for a piece of software, this analytical tool helps separate the must-haves and should-haves from the could- and would-haves. It does this by challenging inertia and assumption — by making us validate the activities that eat up the only commodity we’ll never get more of — time.

You can download a blank Eisenhower matrix and start sorting your present as I take you through my own.

Start by listing everything you do — and everything you wish you were doing — on Post-Its and honestly measure how urgent and important those activities are to you right now. Then take a moment. Look at it. This might be the first time you’ve let yourself acknowledge the fruitless things that keep you busy or the priorities unfulfilled inside you.

What’s important and urgent?
  • Deadlines
  • Health crises
  • Taxes (at the end of each quarter or around April 15)
  • Rent (at least once a month)
What’s important but not urgent?
  • Something you're passionate about but which doesn’t have a deadline
  • A long-term project — can you delegate parts of it?
  • Telling your loved ones that you love them
  • Family time
  • Planning
  • Self-care
What’s urgent but not important?
  • Phone calls
  • Texts and Slacks
  • Most emails
  • Unscheduled favors
Neither important or urgent
  • TV (yes, even Netflix)
  • Social media
  • Video games
Do it once. Do it often. We regularly include Eisenhower charts in our weekly business and family planning. The busier you are, the more valuable it becomes. (Large preview)

The goal is to identify what’s important, not just what’s urgent. To identify your priorities. And as you repeat this activity over the course of weeks or even years, it makes you conscious of how you spend your time and can have a tremendous impact on how well that time is spent. Because the humbling fact is, no one else is going to prioritize what’s important to you. Your loving partner, your supportive family, your boss and your clients — they all have their own priorities. They each have something that’s most important to them. And those priorities don’t necessarily align with yours.

Because the things that are important to each of us — not necessarily urgent — need time in our schedules if they’re going to provide us with genuine and lasting self-actualization. These are our priorities. And you know what you’re supposed to do with priorities.

Prioritize them.

Get sh!t done. “The key is not to prioritize your schedule but to schedule your priorities.” — Stephen Covey, Seven Habits of Highly Effective People. (Large preview)

Identifying what your priorities are is critical to getting them into your schedule. Because, if you want to paint or travel or spend time with the kids or start a business, no one else is going to put that first. You have to. It is up to you to identify what’s important and then find time for it. And if time isn’t found for your priorities, you only have one person to blame.

We do these charts regularly, both for family and business planning. And one of the things I often take away from this exercise is the reminder to schedule blocks of time for the kids. And to schedule time for the thing I’m most passionate about — writing. I am a designer who writes but I aspire to become a writer who designs. And I’ll only get there if I prioritize it.

Success Metrics For The Future: Affinity Mapping

If you’ve ever seen a police procedural, you’ve seen an affinity map.

Affinity maps are a simple way to find patterns in qualitative data. UXers often use them to make sense of user interviews and survey data, to find patterns that inform personae or user requirements, and to tease out that most elusive gap.

In regards to designing your life, an affinity map is a powerful technique for individuals, partners, and teams to determine what they want and need out of their lives, to synthesize that information into actionable and measurable requirements, and to create a vision of what their life might look like in the future.

Great minds think alike. Team affinity mapping can help you and your family, or you and your business partners, align your priorities. My wife and I did this activity when we started our business to make sure we were on the same page. And we’ve looked back at it, regularly, to measure if we’re staying on target. (Large preview)

You don’t need a template to get started affinity mapping. Just a lot of Post-It notes and a nice big wall, window, or table.

How to affinity map your life (alone or with your life/business partners)
  • Write down any important goal you want to achieve on its own Post-it.
  • Write down important values or activities you want to prioritize on its own Post-it.
  • Categorize the insights under “I” statements to keep the analysis from the user’s (your!) point of view.
  • Organize that data by the insights it suggests. For instance, notes reading “I want to spend more time with my kids” and “I don’t want to commute for an hour each way” might fall under the heading “I want to work close to home.”
  • Timebox the exercise. You can easily spend all day on this one. Set a timer to make sure you don’t spend it overthinking (technical term: navel gazing).

This is a shockingly quick and easy technique to synthesize the insights from Your Life In Weeks and your Eisenhower chart. And by framing the results in “I” statements, your aggregate research begins speaking back to you — as a pseudo personae of yourself or of your partnership with others.

Insights such as “I want to work close to home” and “I want to work with important causes” become your life’s requirements and the success metrics (KPIs). They’ll form the basis for testing and retrospectives.

Speaking of testing...

Prototype Or Dive Right In

Now that you’ve audited, validated, and created a vision for the life you want to live, what do you do with this information?

Design a solution!

Maybe you only need to change one thing. Maybe you need to change everything! Maybe you need to save up some runway money if the change impacts your income or your expenses. Maybe you need to dramatically cut your expenses. No change is without consequence, and your life’s requirements are different from anyone else’s.

When my wife sat down and did these activities, we determined we wanted to:

  • Work together
  • Work from home, so we don’t have to commute
  • Start our work day early, so we’re done by the time the kids come home from school
  • Not check email or slack after hours or on weekends
  • Make time for our priorities and our passion projects.
All about the pies. Aligning our priorities helped define the services or business offers and the delicious return on the investment our clients can expect. (Large preview)

Central to this vision of the life we wanted was a new business — one that met the functional and reliability needs of income, insurance, and career while also satisfying the usability and joy requirements of interest, collaboration, and self-actualization. And, in the process, these activities also helped us identify what services that business would offer. Design, content, education, and friendship became the verticals we wanted to give our time to and take fulfillment from.

But we didn’t just jump in, heedless or without regard to the impact a shift in employment and income might have on our family. Instead, we prototyped what this new business might look like before committing it to the market.

Prototyping is serious business. We took advantage of a local hackathon to test working together and with a team before quitting our day jobs. (Large preview)

Using after-hours freelance client work and hackathons, we tested various workstyles, teams, and tools while also assessing more abstract but critical business and lifestyle concerns like hourly rates, remote collaboration, and shifted office hours. And with each successive prototype, we:

  1. Observed (research)
  2. Iterated (design)
  3. Retrospected (testing).

Some of the solutions that emerged from this were:

  • A remote-work team model based on analogue synchronous communication and digital statuses (eg. phone calls and Slack stand-ups).
  • No dedicated task management system — everyone has their preferred accountability method. My wife and I, for instance, prefer pen and paper lists and talking to each other instead of process automation tools (we learned we really hate Trello!).
  • Our URL — importantshit.co — is a screener to filter clients for personality and humor compatibility.
  • Google Friday-style passion project time, built into our schedules to help us prioritize what’s important to each of us.

And some of the problems we identified:

  • We both hate bookkeeping — there’s a lot to learn.
  • Scaling a remote team requires much more deliberate management.
  • New business development is hard — we might need to hire someone to help with that.

So when we finally launched J+E Creative full time, we already had a sense of what worked for us and what challenges required further learning and iteration. And because we prototyped, first, we had the confidence and a few clients in place so that we didn’t have to save too much money before making the change.

The ROI For Designing Your Life

Superficially, we designed a new business for ourselves. More deeply, though, we took control of variables and circumstances that let us meet our self-identified lifestyle goals: spending more time with the kids, prioritizing our marriage and our family above work, giving ourselves time to practice and grow our passions, and better control our financial futures.

The return on investment for designing your life is about as straightforward as design solutions get. As Bill Burnett and Dave Evans put it, “A well-designed life is a life that is generative — it is constantly creative, productive, changing, evolving, and there is always the possibility of surprise. You get out of it more than you put in.”

Hopefully you’ll see how a Your Life In Weeks audit can help you learn from your past, how an Eisenhower chart can help you prioritize the present, and how a simple affinity mapping exercise for your wants and needs can help you see beyond money-based decisions and assess if you’re making the right decisions regarding family, clients, and project.

Live and work, by design. Mindfully designing our lives and our careers allowed us to pursue our own business (J+E Creative) and our separate passions (elliedecker.com and o-jd.com) (Large preview)

It’s always a give and a take. We frequently have to go back to our affinity map results to make sure we’re still on target. Or re-prioritize with an Eisenhower chart — especially in a challenging week. And, sometimes, the urgent trumps the important. It’s life, after all. But always with the understanding that we are each on the hook when our lives aren’t working out the way we want. And that we have the tools and the insights necessary to fix it.

So schedule a kickoff and set a deadline. You’ve got a new project.

Down For More?

Ready to start designing a more mindful life and career? Here are a couple links to help you get started:

(cc, ra, yk, il)
Categories: Web Design

The Ethics Of Persuasion

Tue, 06/05/2018 - 04:30
The Ethics Of Persuasion The Ethics Of Persuasion Lyndon Cerejo 2018-06-05T13:30:24+02:00 2018-06-14T13:28:26+00:00

(This article is kindly sponsored by Adobe.) A few months ago, the world was shocked to learn that Cambridge Analytica had improperly used data from a harmless looking personality quiz on Facebook to profile and target the wider audience on the platform with advertisements to persuade them to vote a certain way. Only part of the data was obtained with consent (!), the data was stored by the app creator (!!), and it was sold to Cambridge Analytica in violation of terms of use (!!!). This was an example of black hat design, a deceptive use of persuasion tactics, combined with unethical use of personal information.

On the other hand, the last time you shopped on eBay, you may have noticed the use of multiple design elements encouraging you to buy an item (“last item”, “3 watched in the past day”). While these design techniques are used to persuade users, they are usually not deceptive and are considered white hat techniques.

A third example comes from Google I/O 2018 last month when the world heard Google Duplex make a call to a salon for an appointment and carry out a fluent conversation mimicking human mannerisms so well that the person at the other end did not realize she was talking to a machine. The machine did not misrepresent itself as human, nor did it identify itself as a machine, which, in my book, puts it in a gray area. What’s stopping this from being used in black hat design in the near future?

Large preview

As you see from the three examples above, the use of persuasive tactics can fall anywhere on a spectrum from black hat at one extreme to white hat at the other, with a large fuzzy gray area separating the two. In today’s world of online and email scams, phishing attacks, and data breaches, users are increasingly cautious of persuasive tactics being used that are not in their best interest. Experience designers, developers, and creators are responsible for making decisions around the ethical nature of the tactics we use in our designs.

This article will present a brief history of persuasion, look at how persuasion is used with technology and new media, and present food for thought for designers and developers to avoid crossing the ethical line to the dark side of persuasion.

History Of Persuasion

Persuasion tactics and techniques are hardly new — they have been used for ages. Aristotle’s Rhetoric, over 2000 years ago, is one of the earliest documents on the art of persuasion. The modes of persuasion Aristotle presented were ethos (credibility), logos (reason), and pathos (emotion). He also discussed how kairos (opportune time) is important for the modes of persuasion.

Fast forward to today, and we see persuasion methods used in advertising, marketing, and communication all around us. When we try to convince someone of a point of view or win that next design client or project, chances are we are using persuasion: a process by which a person’s attitudes or behavior are, without duress, influenced by communications from other people (Encyclopedia Britannica).

While Aristotle first documented persuasion, Robert Cialdini’s Influence: The Psychology of Persuasion is more commonly referenced when talking about modern persuasion. According to Cialdini, there are six key principles of persuasion:

  1. Reciprocity
    People are obliged to give something back in exchange for receiving something.
  2. Scarcity
    People want more of those things they can have less of.
  3. Authority
    People follow the lead of credible, knowledgeable experts.
  4. Consistency
    People like to be consistent with the things they have previously said or done.
  5. Liking
    People prefer to say yes to those that they like.
  6. Consensus (Social Proof)
    Especially when they are uncertain, people will look to the actions and behaviors of others to determine their own.

We have all been exposed to one or more of these principles, and may recognize them in advertising or when interacting with others. While that has been around for ages, what is relatively new is the application of persuasion techniques to new technology and media. This started off with personal computers, became more prominent with the Internet, and is now pervasive with mobile devices.

Persuasion Through Technology And New Media

Behavior scientist B.J. Fogg is a pioneer when it comes to the role of technology in persuasion. Over two decades ago, he started exploring the overlap between persuasion and computing technology. This included interactive technologies like websites, software, and devices created for the purpose of changing people’s attitudes or behaviors. He referred to this field as captology, an acronym based on computers as persuasive technologies, and wrote the book on it, Persuasive Technology: Using Computers to Change What We Think and Do.

Captology describes the shaded area where computing technology and persuasion overlap (recreated from BJ Fogg’s CHI 98 paper, Persuasive Computers). (Large preview)

Interactive technologies have many advantages over traditional media because they are interactive. They also have advantages over humans because they can be more persistent (e.g. software update reminders), offer anonymity (great for sensitive topics), can access and manipulate large amounts of data (e.g. Amazon recommendations), can use many styles and modes (text, graphics, audio, video, animation, simulations), can easily scale, and are pervasive.

This last advantage is even more pronounced today, with mobile phones being an extension of our arms, and increased proliferation of smart devices, embedded computing, IoT, wearable technology, Augmented Reality, Virtual Reality, and virtual assistants powered by AI being embedded in anything and everything around us. In addition, today’s technological advances allow us to time and target moments of persuasion for high impact, since it is easy to know a user’s location, context, time, routine, and give them the ability to take action. This could be a reminder from your smartwatch to stand or move, or an offer from the coffee shop while you are a few blocks away.

Ethics And New Technology And Interactive Media

The use of persuasion in traditional media over the past decades has raised questions about the ethical use of persuasion. With new media and pervasive technology, there are more questions about the ethical use of persuasion, some of which are due to the advantages pervasive technology has over traditional media and humans. Anyone using persuasive methods to change people’s minds or behavior should have a thorough understanding of the ethical implications and impact of their work.

One of the key responsibilities of a designer during any design process is to be an advocate for the user. This role becomes even more crucial when persuasion techniques are intentionally used in design, since users may be unaware of the persuasion tactics. Even worse, some users may not be capable to detect these tactics, as may be the case with children, seniors or other vulnerable users.

BJ Fogg provides six factors that give interactive technologies an advantage over users when it comes to persuasion:

  1. Persuasive intent is masked by novelty
    The web and email are no longer novel, and most of us have wizened up to deceptive web practices and the promises of Nigerian Princes, but we still find novelty in new mobile apps, voice interfaces, AR, VR. Not too long ago, the craze with Pokémon Go raised many ethical questions.
  2. Positive reputation of new technology
    While “It must be true — I saw it on the Internet” is now a punchline, users are still being persuaded to like, comment, share, retweet, spread challenges, and make fake news or bot generated content viral.
  3. Unlimited persistence
    Would you like a used car salesman following you around after your first visit, continually trying to sell you a car? While that thankfully does not happen in real life, your apps and devices are with you all the time, and the ding and glowing screen have the ability to persistently persuade us, even in places and times that may be otherwise inappropriate. This past Lent, my son took a break from his mobile device. When he started it after Easter, he had hundreds of past notifications and alerts from one mobile game offering all sorts of reminders and incentives to come back and use it.
  4. Control over how the interaction unfolds
    Unlike human persuasion, where the person being persuaded has the ability to react and change course, technology has predefined options, controlled by the creators, designers and developers. When designing voice interfaces, creators have to define what their skill will be able to do, and for everything else come back with a “Sorry I can’t help with that”. Just last month, a social network blocked access to their mobile website, asking me to install their app to access their content, without an escape or dismiss option.
  5. Can affect emotion while still being emotionless
    New technology doesn’t have emotion. Even with the recent advances in Artificial Intelligence, machines do not feel emotion like humans do. Back to the Google Duplex assistant call mentioned at the beginning, issues can arise when people are not aware that the voice at the other end is just an emotionless machine, and treat it as another person just like them.
  6. Cannot take responsibility for negative outcomes of persuasion
    What happens when something goes wrong, and the app or the technology cannot take responsibility? Do the creators shoulder that responsibility, even if their persuasion strategies have unintended outcomes, or if misused by their partners? Mark Zuckerberg accepted responsibility for the Cambridge Analytica scandal before and during the congress hearings.

With these unfair advantages at our disposal, how do we, as creators, designers, and developers make ethical choices in our designs and solutions? For one, take a step back and consider the ethical implication and impact of our work, and then take a stand for our users.

Many designers are pushing back and being vocal about some of the ethically questionable nature of tech products and designs. There’s Tristan Harris, a former Google Design Ethicist, who has spoken out about how tech companies’ products hijack users’ minds. Sean Parker, Napster founder and former president of Facebook, described how Facebook was designed to exploit human “vulnerability”. And Basecamp’s Jonas Downey ruminates on how most software products are owned and operated by corporations, whose business interests often contradict their users’ interests.

Design Code Of Conduct

AIGA, the largest professional membership organization for design, has a series on Design Business and Ethics. Design Professionalism author Andy Rutledge also created a Professional Code of Conduct. Both are very detailed and cover the business of design, but not specifically ethics related to design that impacts or influences human behavior.

Other professionals who impact the human mind have ethical principles and codes of conduct, like those published by the American Psychological Association and the British Psychological Society. The purpose of these codes of conduct is to protect participants as well as the reputation of psychology and psychologists themselves. When using psychology in our designs, we could examine how the ethical principles of psychologists are applicable to our work as creators, designers, and developers.

Principles And Questions

Using the Ethical Principles of Psychologists as a framework, I defined how each principle applies to persuasive design and listed questions related to ethical implications of design. These are by no means exhaustive but are intended to be food for thought in each of these areas. Note: When you see ‘design’ in the questions below, it refers to persuasive techniques used in your design, app, product or solution.

Principle A: Beneficence And Nonmaleficence

Do no harm. Your decisions may affect the minds, behavior, and lives of your users and others around them, so be alert and guard against misusing the influence of your designs.

  • Does your design change the way people interact for the better?
  • Does the design aim to keep users spending time they didn’t intend to?
  • Does the design make it easy to access socially unacceptable or illegal items that your users would not have easy access to otherwise?
  • How may your partners (including third-party tools and SDKs) or “bad guys” misuse your design, unknown to you?
  • Would you be comfortable with someone else using your design on you?
  • Would you like someone else to use this design to persuade your mother or your child?
Principle B: Fidelity And Responsibility

Be aware of your responsibility to your intended users, unintended users and society at large. Accept appropriate responsibility for the outcomes of your design.

  • During design, follow up answers to “How might we…?” with “At what cost?”
  • What is the impact of your design/product/solution? Who or what does it replace or impact?
  • If your design was used opposite from your intended use, what could the impact be?
  • Does your design change social norms, etiquette or traditions for the better?
  • Will the design put users in harm’s way or make them vulnerable, intentionally or unintentionally (Study Estimates That Pokémon GO Has Caused More Than 100,000 Traffic Accidents)? How can it be prevented?
Principle C: Integrity

Promote accuracy, honesty, and truthfulness in your designs. Do not cheat, misrepresent or engage in fraud. When deception may be ethically justifiable to maximize benefits and minimize harm, carefully consider the need for, the possible consequences of, and be responsible for correcting any resulting mistrust or other harmful effects that arise from the use of such techniques.

  • Do you need users’ consent? When asking for their consent, are they aware of what exactly they are consenting to?
  • What’s the intent of the design? Is it in the best interest of the user or the creator? Are you open and transparent about your intentions?
  • Does your design use deception, manipulation, misrepresentation, threats, coercion or other dishonest techniques?
  • Are users aware or informed if they are being monitored, or is it covert?
  • Is your design benefiting you or the creators at the expense of your users?
  • What would a future whistleblower say about you and your design?
Principle D: Justice

Exercise reasonable judgment and take precautions to ensure that your potential biases, the limitations of your expertise does not lead to, or condone unjust practices. Your design should benefit both the creators and users.

  • Does your design contain any designer biases built in (gender, political, or other)?
  • Does your design advocate hate, violence, crime, propaganda?
  • If you did this in person, without technology, would it be considered ethical?
  • What are the benefits to the creators/business? What are the benefits to the users? Are the benefits stacked in favor of the business?
  • Do you make it easy for users to disconnect? Do users have control and the ability to stop, without being subject to further persuasion through other channels?
Principle E: Respect For People’s Rights And Dignity

Respect the dignity and worth of all people, and the rights of individuals to privacy, and confidentiality. Special safeguards may be necessary to protect the rights and welfare of vulnerable users.

  • Are your designs using persuasion with vulnerable users (children, seniors, poor)?
  • Does your design protect users’ privacy and give them control over their settings?
  • Does the design require unnecessary permissions to work?
  • Can your design use a less in-your-face technique to get the same outcome? (e.g. speed monitors on roads instead of surveillance)
  • Does your design make your users a nuisance to others? How can you prevent that?
Conclusion

If you have been designing with white hat techniques, you may appreciate the ethical issues discussed here. However, if you have been designing in the grey or black area, thank you for making it all the way to the end. Ethics in persuasive design are important because they don’t prey on the disadvantages users have when it comes to interactive technology. As creators, designers, and developers, we have a responsibility to stand up for our users.

Do good. Do no harm. Design ethically.

Resources Books Links

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

(ra, il, yk)
Categories: Web Design

Making Avengers ID Card In HTML And CSS

Mon, 06/04/2018 - 07:00
Making Avengers ID Card In HTML And CSS Making Avengers ID Card In HTML And CSS Kunal Sarkar 2018-06-04T16:00:01+02:00 2018-06-14T13:28:26+00:00

Let’s suppose Tony Stark would like to redesign the ID cards of the Avengers, and he needs our help to create them in HTML and CSS. So, how can we help? In this tutorial, we’ll be using Flexbox to create the desired layout while diving into nested flexboxes for some advanced layouts. We will also be using rounded as well as transparent borders to create sci-fi arcs in CSS, and then animating them by using CSS animations around the picture of the Avenger. Last but not least, we’ll be using the box-shadow and text-shadow properties to give our ID card a final sci-fi touch.

By the end of the tutorial, we will build a sci-fi animated Avengers ID card, and also learn the basics of Flexbox, nested Flexbox, CSS animations, borders, shadows, and many other frequently used CSS properties.

Here’s how our final Avengers ID card will look like:

See the Pen Avengers ID Card by Kunal Sarkar (@supersarkar) on CodePen.

Let’s get started!

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry → Full-Page Background

We need a div that covers the entire screen. We will use this div as the background to place the ID card:

<div class="id-card-wrapper"> </div>

Let’s make the div cover the entire page and give a dark background:

body { margin:0px; } .id-card-wrapper { height: 100vh; width:100%; background-color: #122023; } Why use 100vh and not 100% for height?

If you look closely, you will notice that we used 100% for width, but 100vh for height. The vh unit stands for “viewport height”. It is a viewport unit, some other viewport units are: vw, vmin, and vmax.

So, why should we use 100vh instead of 100% for the height? Well, a % based dimension is relative to its parent element. So, if we set the height of the id-card-wrapper to 100%, that would mean it will make the height of id-card-wrapper cover 100% of the height of its parent element (which is the body element).

The problem is — by default — the body element doesn’t cover entire screen’s height. The width of the body element is by default 100% that’s why we can use width: 100% on id-card-wrapper, but since the height is not 100% by default the same won’t work for height.

Since a viewport unit is relative to the viewport, not the parent element, setting the height to 100vh will make the element cover entire height of the visible area (viewport), regardless of the parent’s dimensions.

Note: If you want to dive deeper into the viewport units, checkout this Fun with Viewport Units article on CSS-Tricks. One more thing, there are many ways to create a full page background, Chris Coyier lists them well in this post.

Why margin: 0px On Body?

The browsers by default display some margin around the body. If we don’t set this margin to 0, we will get a white gap around the id-card-wrapper div.

Centering Using Flexbox

There are many ways to center. Now that our full-page background is ready, let’s create the div that will contain our ID Card. We will put only “Test” as content, and build the layout first:

<div class="id-card-wrapper"> <div class="id-card"> Test </div> </div>

And add some styles to it:

.id-card { border: 2px solid #0AE0DF; max-width: 30em; margin: auto; color: #fff; padding: 1em; }

We are using the border property to give a 2px solid border of #0AE0DF color to the id-card element.

Since a “div” is a block element, it will cover the entire width of the parent element by default. But we don’t want it to go beyond 30em, so we’ll set the max-width property to 30em.

Wait, What Is em Again?

Here’s what W3C has to say about the “em” unit:

“The em is simply the font size. In an element with a 2in font, 1em thus means 2in.”

This means that if your browser has a default font size of 14px, then 30em will be equal to 30×14 = 420px.

But, why use em unit instead of px?

Look, the em unit is relative to the font size. Let’s suppose you are using a browser with 14px default font size. Now if someone views your project from another browser that has 16px as default font size, then guess what would happen?

The content inside will need more space, but your div has a fixed width, i.e. the content will either spill out or break the layout.

It’s always a good idea to have dimensions that scale along with the content, instead of fixing it to arbitrary pixels.

Why Doesn’t margin: auto Center The div Vertically?**

We already know that we can center a block element horizontally using margin: auto, but it doesn’t work for vertical centering.

Auto margin centers the element horizontally

What if I told you that margin: auto works vertically, too? Actually, in normal layout mode, it doesn’t. But in new layout modes like Flexbox, the margin: auto works for vertical centering, too. Go ahead and make the id-card-wrapper a flexbox to see it yourself:

.id-card-wrapper { height: 100vh; width:100%; background-color: #122023; display: flex; }

Output:

Auto margin centers the element horizontally and vertically if the element is a flex-item

As you can see, our id-card div is now centered horizontally and vertically. We simply set display: flex on the id-card-wrapper div. When you set display: flex to an element, that element becomes a flex-container and its child elements become flex-items. Check out “Basic Concepts Of Flexbox” on MDN.

Okay, this did center our element, but why did it lose its width? The id-card div is a block element, and since block elements are by default 100% wide, why did the div lose this block level behavior when it became a flex-item?

Actually, it hasn’t lost its block behavior. What’s happening is, as soon as the div comes into the flexbox context, the flexbox algorithm notes that the div doesn’t have any width property set to it (we are giving it only max-width), and then it sets the initial width to 0.

We can change this behavior by explicitly defining the initial width of the element using the flex-basis property, like this:

.id-card { flex-basis: 100%; border: 2px solid #0AE0DF; max-width: 30em; margin: auto; color: #fff; padding: 1em; }

And now the result looks just as expected:

The initial width of the flex-item set to 100% using “flex-basis” Nested Flexboxes

Now our id-card div is ready for content. Let’s create a profile-row div and two sections in it dp and desc. The dp div will contain the profile photo of the Avenger while the desc div will contain the description of that Avenger:

<div class="id-card-wrapper"> <div class="id-card"> <div class="profile-row"> <div class="dp"> Test </div> <div class="desc"> Test desc </div> </div> </div> </div>

We know that the id-card div is a flex-item, but the div we just created inside id-card (the profile-row div) isn’t a flex-item. Yes, only the direct decedents of the flex-containers become flex-items, but not the grandchildren.

Therefore, profile-row is a normal div, and we will make it a flex-container by setting display: flex to it. This will make its child elements, dp and desc, flex-items:

.profile-row { display: flex; }

Now we can use the flex-basis property to make the dp div 33.3% wide and the desc div 66.6% wide:

.profile-row .dp { flex-basis: 33.3%; } .profile-row .desc { flex-grow: 66.6%; }

Here’s what we get:

We can define how much space the elements would occupy using the “flex-basis” property. Profile Image

For the profile image, we will use a cute Iron Man picture for Stark’s ID card (download it here). Include the image using img tag inside the dp div:

<div class="id-card-wrapper"> <div class="id-card"> <div class="profile-row"> <div class="dp"> <img src="img/iron-man-dp.jpg"> </div> <div class="desc"> Test desc </div> </div> </div> </div>

And give some styles to it:

.profile-row .dp img { max-width: 100%; border-radius: 50%; } .profile-row .desc { padding: 1em; }

We set max-width: 100% for the img element because the img element by default displays the image in its original resolution.

If the image is 500px×500px then it will be displayed in that dimension. But we don’t want that. Instead, we want the image to be only as wide as the dp div, that’s why we set its max-width to 100%.

Also, we set the border-radius property to 50%. We are doing this to display the image as a circle:

We don’t make the img element a flex-item, but rather put it inside a flex-item. Making Arcs In CSS

Eventually, Tony visits us while we’re still working on this ID card, and says that this doesn’t look sci-fi enough. Alright, no problem. Let’s make it more sci-fi. We can make two arcs rotate around the image by inserting the first arc dp-arc-inner inside the dp element:

<div class="id-card-wrapper"> <div class="id-card"> <div class="profile-row"> <div class="dp"> <div class="dp-arc-inner"></div> <img src="img/iron-man-dp.jpg"> </div> <div class="desc"> Test desc </div> </div> </div> </div>

Position it in CSS:

.profile-row .dp { flex-basis: 33.3%; position: relative; } .profile-row .dp img { max-width: 100%; border-radius: 50%; display: block; } .profile-row .dp .dp-arc-inner { position: absolute; width: 100%; height: 100%; border: 6px solid #0AE0DF; top: -6px; left: -6px; }

We want the arc div to overlap on the dp div. The only problem is that elements don’t overlap in HTML. However, if we set the position of an element as absolute then that element is taken out of the normal flow of the document and we can set its position as we desire.

The default positioning of HTML elements is static. We set position: absolute on dp-arc-inner to make it absolutely positioned. Now we can use left, top, bottom, and right properties to set its position.

One caution: The left, top, bottom, and right properties are relative the first parent element in the hierarchy which is “relatively” positioned. That’s why we’ve set position: relative on the dp div. If we don’t do this, the left, top, bottom, and right properties will be set respectively to the screen, not the dp element.

One more thing: we are setting display: block on the img element. Why? Because img elements are inline-block by default, and inline-block elements display a tiny gap on its sides and bottom.

This gap generally doesn’t cause any problem, but a little gap around the image in our case will offset the arc’s position. So we set the img element as block element.

Next, let’s make the dp-arc-inner div look like an arc:

.profile-row .dp .dp-arc-inner { position: absolute; width: 100%; height: 100%; border: 6px solid transparent; border-top-color: #0AE0DF; border-radius: 50%; top: -6px; left: -6px; }

What we are doing is, instead of setting the border for all the sides with #0AE0DF color, we are setting all the sides as transparent, and then giving only the top border the color #0AE0DF. Then we set the border-radius: 50% to make it round:

The negative margins offsets the width of the border we gave to the arc

Okay, let’s create one more arc, dp-arc-outer:

<div class="id-card-wrapper"> <div class="id-card"> <div class="profile-row"> <div class="dp"> <div class="dp-arc-outer"></div> <div class="dp-arc-inner"></div> <img src="img/iron-man-dp.jpg"> </div> <div class="desc"> Test desc </div> </div> </div> </div>

And style it the same way:

.profile-row .dp .dp-arc-outer { position: absolute; width: calc(100% + 12px); height: calc(100% + 12px); border: 6px solid transparent; border-bottom-color: #0AE0DF; border-radius: 50%; top: -12px; left: -12px; }

Wow, what’s that calc thing there?

Calc is a CSS function that calculates the mathematical expression given to it. Look, we had the inner arc with width and height of 100% and a border of 6px, right? That makes the inner arc’s total width 6px + 100% + 6px.

Now if we want the outer arc to be bigger than the inner arc then we need some way to make it 100% + 12px wide. This is where the calc() function comes to the rescue.

Also, notice that we are using border-bottom-color for this arc since we want the arc to display on the bottom.

Output:

The calc function adds 12px to create the 6px gap between the arc and the image Animating The Arcs

Now that our arcs are ready, let’s make them rotate around the image. We can do this with the help of CSS animations.

Any animation requires three basic things:

  1. The start state of the animation,
  2. The end state of the animation,
  3. How long it should take to go from start to end state (speed of the animation).

We can provide these data in CSS like this:

.profile-row .dp .dp-arc-inner { position: absolute; width: 100%; height: 100%; border: 6px solid transparent; border-top-color: #0AE0DF; border-radius: 50%; top: -6px; left: -6px; animation-duration: 2s; animation-name: rotate-clock; } @keyframes rotate-clock { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

We use @keyframes to define the animation. The from and to keywords are used to set the start and end state of the animation.

In the start state, we are rotating the arc 0-degree using transform: rotate(0deg), and in the end state we are rotating the arc 360-degree using transform: rotate(360deg).

To use this animation on an element, we need to give the name of the animation (rotate-clock in our case) to the animation-name property of that element. That’s what we are doing with animation-name: rotate-clock .

We also need to know how long it should take the animation to complete. We can do this by setting animation-duration property to 2s.

See the Pen Avengers ID Card - 1 by Kunal Sarkar (@supersarkar) on CodePen.

You will notice two problems in the output. One, the arc is rotated only one time, we want it to keep rotating, and two, the animation is not linear. The animation is fast at beginning and end, we want it to rotate with same speed throughout the animation.

To solve these problems, we will use the animation-iteration-count property to keep the animation repate itself infinite times, and animation-timing-function property to get a linear animation:

.profile-row .dp .dp-arc-inner { position: absolute; width: 100%; height: 100%; border: 6px solid transparent; border-top-color: #0AE0DF; border-radius: 50%; top: -6px; left: -6px; animation-duration: 2s; animation-name: rotate-clock; animation-iteration-count: infinite; animation-timing-function: linear; }

See the Pen Avengers ID Card - 2 by Kunal Sarkar (@supersarkar) on CodePen.

Okay, the inner arc is now rotating as expected. Now let’s animate the outer arc in the same way, but in the opposite direction:

.profile-row .dp { flex-basis: 33.3%; position: relative; margin: 24px; } .profile-row .dp .dp-arc-outer { position: absolute; width: calc(100% + 12px); height: calc(100% + 12px); border: 6px solid transparent; border-bottom-color: #0AE0DF; border-radius: 50%; top: -12px; left: -12px; animation-duration: 2s; animation-name: rotate-anticlock; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate-anticlock { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

We only changed the to state for the outer arc. Instead of rotating it a positive 360 degree, we rotated it a negative 360 degree, to get an anti-clockwise animation.

Note that we also added 24px margin to the .dp so that it doesn’t get too congested. Here’s what our result looks like now:

See the Pen Avengers ID Card - 3 by Kunal Sarkar (@supersarkar) on CodePen.

Using A Sci-Fi Google Font

Tony visits again, and this time he is happy with where we are heading. Only one thing though: he asks to use a sci-fi font.

Not a problem. Let’s use the Orbitron font from Google Fonts. Google Fonts gives a wealth of fonts for free and this particular font fits our requirement quite well.

Click on “Select this Font”:

You will see the “Select this font” link once you visit the Google font link

A popover will appear at the bottom. Click on it. You will get two codes: the <link> code to copy into your HTML, and the font-family code to use in your CSS:

When you click the “Select this font” link a pop-up will be displayed with link and “font-family” code of that font

Copy the <link> code into your HTML file just above the line where you are including your stylesheet.

Now let’s add some details of Iron Man inside the desc div:

<div class="id-card-wrapper"> <div class="id-card"> <div class="profile-row"> <div class="dp"> <div class="dp-arc-outer"></div> <div class="dp-arc-inner"></div> <img src="img/iron-man-dp.jpg"> </div> <div class="desc"> <h1>Tony Stark</h1> <p>Strength: Ironman Suit</p> <p>Weakness: None</p> <p>Known as: Iron Man</p> </div> </div> </div> </div>

In our CSS, we will use the font-family code from Google Fonts to set the font of desc div:

.profile-row .desc { font-family: 'Orbitron', sans-serif; color: #a4f3f2; } .profile-row .desc h1 { margin: 0px; }

Wait a sec, why are we setting the margin of h1 to 0?

You see, all the heading elements (h1, h2, h3, h4, and h5) are displayed with some margin around it by the browsers. This is usually not a problem, but we don’t want the top and bottom gaps around the heading elements right now. That’s why we zeroed the margin for h1 element.

Let’s have a look at the output:

See the Pen Avengers ID Card - 4 by Kunal Sarkar (@supersarkar) on CodePen.

Uh oh! What happened?

Looks like the height of the dp div is increasing. Normally, if the content in the desc div is of more height than the height of the dp div then nothing happens to the dp div. However, in Flexbox layout, the height of the dp div will also increase along with the height of the desc div.

We don’t want the dp div to increase in height with the desc div, so we can control this by using the align-self sub-property of flexbox like this:

.profile-row .dp { flex-basis: 33.3%; align-self: center; position: relative; margin: 24px; }

See the Pen Avengers ID Card - 5 by Kunal Sarkar (@supersarkar) on CodePen.

The align-self: center makes the dp div to center keeping its height the same.

Adding Glow

Now, let’s add some glow.

But wait, CSS doesn’t have any glow property.

No problem, it does have the text-shadow property. If we give a bright color to the shadow, the shadow will look like it’s glowing:

.profile-row .desc { font-family: 'Orbitron', sans-serif; color: #d3f8f7; text-shadow: 0px 0px 4px #12a0a0; letter-spacing: 1px; }

In the text-shadow property, the first value, 0px, is the x-offset, how much the shadow is away from text in the x-direction. The second value, 0px, is the y-offset, telling us how much the shadow is away from the text in the y-direction. The third value, 4px, is the amount of blur you want to give to the shadow. The fourth value, #12a0a0, is the color of the shadow.

Note that we also added a 1px space between the letters of text using the letter-spacing property because the text was looking a bit congested.

Next, let’s add some shadow to the ID card and the image:

.id-card { flex-basis: 100%; max-width: 30em; border: 1px solid rgb(97, 245, 245); margin: auto; color: #fff; padding: 1em; background-color: #0D2C36; box-shadow: 0px 0px 3px 1px #12a0a0, inset 0px 0px 3px 1px #12a0a0; } .profile-row .dp img { max-width: 100%; border-radius: 50%; display: block; box-shadow: 0px 0px 4px 3px #12a0a0; }

The text-shadow property gives shadow to the text, and the box-shadow property gives shadow to the elements.

The first three values for box-shadow are the same as text-shadow x-offset, y-offset, and blur. The fourth value is how much you want the shadow to spread, and the fifth value is the color of the shadow.

Notice how we are giving two shadows (outer and inner) to the id-card div in a single line:

box-shadow: 0px 0px 3px 1px #12a0a0, inset 0px 0px 3px 1px #12a0a0;

The first five values create an outer shadow. Then the “inset” keyword specifies that the next five values are for inside shadow. We separate both with a ,.

See the Pen Avengers ID Card by Kunal Sarkar (@supersarkar) on CodePen.

The Avengers ID card is ready. Yay!

Wrapping Up

In this tutorial, we learned an effective way of making a full-page background, and centering elements with Flexbox and auto margins. We saw the basic usage of Flexbox and nested Flexboxes to make single dimension layouts.

If you want to dive deeper into Flexbox, check out “A Complete Guide to Flexbox” by Chris Coyier at CSS-Tricks. If you are more of a video learner, then you will enjoy the free 20 video course by Web Bos at Flexbox.io.

We also used CSS animations and the rotate transform to make animated arcs, however, we used a limited number of CSS properties and values. If you want to explore more about CSS animations then you will love this detailed MDN guide.

Finally, the glowing elements gave our ID card a unique sci-fi look. We used the box-shadow property to give the glow to our elements. Sometimes manually setting the values of the box-shadow property can be cumbersome, so try using CSSmatic’s Box Shadow CSS Generator to easily generate box shadows.

(rb, ra, il)
Categories: Web Design

A Reference Guide For Typography In Mobile Web Design

Fri, 06/01/2018 - 04:17
A Reference Guide For Typography In Mobile Web Design A Reference Guide For Typography In Mobile Web Design Suzanna Scacca 2018-06-01T13:17:42+02:00 2018-06-14T13:28:26+00:00

With mobile taking a front seat in search, it's important that websites are designed in a way that prioritize the best experience possible for their users. While Google has brought attention to elements like pop-ups that might disrupt the mobile experience, what about something as seemingly simple as choice of typography?

The answer to the typography question might seem simple enough: what works on desktop should work on mobile so long as it scales well. Right?

While that would definitely make it a lot easier on web designers, that’s not necessarily the case. The problem in making that statement a decisive one is that there haven’t been a lot of studies done on the subject of mobile typography in recent years. So, what I intend to do today is give a brief summary of what it is we know about typography in web design, and then see what UX experts and tests have been able to reveal about using typography for mobile.

Understanding The Basics Of Typography In Modern Web Design

Look, I know typography isn’t the most glamorous of subjects. And, being a web designer, it might not be something you spend too much time thinking about, especially if clients bring their own style guides to you prior to beginning a project.

That said, with mobile-first now here, typography requires additional consideration.

Nope, we can't do any magic tricks, but we have articles, books and webinars featuring techniques we all can use to improve our work. Smashing Members get a seasoned selection of magic front-end tricks — e.g. live designing sessions and perf audits, too. Just sayin'! ;-)

Explore Smashing Wizardry → Typography Terminology

Let’s start with the basics: terminology you’ll need to know before digging into mobile typography best practices.

Typography: This term refers to the technique used in styling, formatting, and arranging “printed” (as opposed to handwritten) text.

Typeface: This is the classification system used to label a family of characters. So, this would be something like Arial, Times New Roman, Calibri, Comic Sans, etc.

A typical offering of typefaces in word processing applications. (Source: Google Docs) (Large preview)

Font: This drills down further into a website’s typeface. The font details the typeface family, point size, and any special stylizations applied. For instance, 11-point Arial in bold.

An example of the three elements that define a font. (Source: Google Docs) (Large preview)

Size: There are two ways in which to refer to the size (or height) of a font: the word processing size in points or the web design size in pixels. For the purposes of talking about mobile web design, we use pixels.

Here is a line-by-line comparison of various font sizes:

An example of how the same string of text appears at different sizes. (Source: Google Docs) (Large preview)

As you can see in WordPress, font sizes are important when it comes to establishing hierarchy in header text:

Header size defaults available with a WordPress theme. (Source: WordPress) (Large preview)

Weight: This is the other part of defining a typeface as a font. Weight refers to any special styles applied to the face to make it appear heavier or lighter. In web design, weight comes into play in header fonts that complement the typically weightless body text.

Here is an example of options you could choose from in the WordPress theme customizer:

Sample font weights available with a WordPress theme. (Source: WordPress) (Large preview)

Kerning: This pertains to the space between two letters. It can be adjusted in order to create a more aesthetically pleasing result while also enhancing readability. You will need a design software like Photoshop to make these types of adjustments.

Tracking: Tracking, or letter-spacing, is often confused with kerning as it too relates to adding space in between letters. However, whereas kerning adjusts spacing between two letters in order to improve appearances, tracking is used to adjust spacing across a line. This is used more for the purposes of fixing density issues while reading.

To give you a sense for how this differs, here’s an example from Mozilla on how to use tracking to change letter-spacing:

This is what normal tracking looks like. (Source: Mozilla) (Large preview) This is what (tighter) -1px tracking looks like. (Source: Mozilla) (Large preview) This is what (looser) 1px tracking looks like. (Source: Mozilla) (Large preview)

Leading: Leading, or line spacing, is the amount of distance granted between the baselines of text (the bottom line upon which a font rests). Like tracking, this can be adjusted to fix density issues.

If you’ve been using word processing software for a while, you’re already familiar with leading. Single-spaced text. Double-spaced text. Even 1.5-spaced text. That’s leading.

The Role Of Typography In Modern Web Design

As for why we care about typography and each of the defining characteristics of it in modern web design, there’s a good reason for it. While it would be great if a well-written blog post or super convincing sales jargon on a landing page were enough to keep visitors happy, that’s not always the case. The choices you make in terms of typography can have major ramifications on whether or not people even give your site’s copy a read.

These are some of the ways in which typography affects your end users:

Reinforce Branding
Typography is another way in which you create a specific style for your web design. If images all contain clean lines and serious faces, you would want to use an equally buttoned-up typeface.

Set the Mood
It helps establish a mood or emotion. For instance, a more frivolous and light-bodied typeface would signal to users that the brand is fun, young and doesn’t take itself seriously.

Give It a Voice
It conveys a sense of personality and voice. While the actual message in the copy will be able to dictate this well, using a font that reinforces the tone would be a powerful choice.

Encourage Reading
As you can see, there are a number of ways in which you can adjust how type appears on a screen. If you can give it the right sense of speed and ease, you can encourage more users to read through it all.

Allow for Scanning
Scanning or glancing (which I’ll talk about shortly) is becoming more and more common as people engage with the web on their smart devices. Because of this, we need ways to format text to improve scannability and this usually involves lots of headers, pull quotes and in-line lists (bulleted, numbered, etc.).

Improve Accessibility
There is a lot to be done in order to design for accessibility. Your choice of font plays a big part in that, especially as the mobile experience has to rely less on big, bold designs and swatches of color and more on how quickly and well you can get visitors to your message.

Because typography has such a diverse role in the user experience, it’s a matter that needs to be taken seriously when strategizing new designs. So, let’s look at what the experts and tests have to say about handling it for mobile.

Typography For Mobile Web Design: What You Need To Know

Too small, too light, too fancy, too close together… You can run into a lot of problems if you don’t strike the perfect balance with your choice of typography in design. On mobile, however, it’s a bit of a different story.

I don’t want to say that playing it safe and using the system default from Google or Apple is the way to go. After all, you work so hard to develop unique, creative and eye-catching designs for your users. Why would you throw in the towel at this point and just slap Roboto all over your mobile website?

We know what the key elements are in defining and shaping a typeface and we also know how powerful fonts are within the context of a website. So, let’s drill down and see what exactly you need to do to make your typography play well with mobile.

1. Size

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult. You want to find that perfect Goldilocks formula and, time and time again, it comes back to 16 pixels.

In general, that rule is a safe one to play by when it comes to the main body text of your mobile website. However, what exactly are you allowed to do for header text? After all, you need to be able to distinguish your main headlines from the rest of the text. Not just for the sake of calling attention to bigger messages, but also for the purposes of increasing scannability of a mobile web page.

The Nielsen Norman Group reported on a study from MIT that covered this exact question. What can you do about text that users only have to glance at? In other words, what sort of sizing can you use for short strings of header text?

Here is what they found:

Short, glanceable strings of text lead to faster reading and greater comprehension when:

  • They are larger in size (specifically, 4mm as opposed to 3mm).
  • They are in all caps.
  • Lettering width is regular (and not condensed).

In sum:

Lowercase lettering required 26% more time for accurate reading than uppercase, and condensed text required 11.2% more time than regular. There were also significant interaction effects between case and size, suggesting that the negative effects of lowercase letters are exacerbated with small font sizes.

I’d be interested to see how the NerdWallet website does, in that case. While I do love the look of this, they have violated a number of these sizing and styling suggestions:

NerdWallet’s use of all-caps and smaller font sizes on mobile. (Source: NerdWallet) (Large preview)

Having looked at this a few times now, I do think the choice of a smaller-sized font for the all-caps header is an odd choice. My eyes are instantly drawn to the larger, bolder text beneath the main header. So, I think there is something to MIT’s research.

Flywheel Sports, on the other hand, does a great job of exemplifying this point.

Flywheel Sports’ smart font choices for mobile. (Source: Flywheel Sports) (Large preview)

There’s absolutely no doubt where the visitors’ attention needs to go: to the eye-catching header. It’s in all caps, it’s larger than all the other text on the page, and, although the font is incredibly basic, its infusion with a custom handwritten-style type looks really freaking cool here. I think the only thing I would fix here is the contrast between the white and yellow fonts and the blue background.

Just remember: this only applies to the sizing (and styling) of header text. If you want to keep large bodies of text readable, stick to the aforementioned sizing best practices.

2. Color and Contrast

Color, in general, is an important element in web design. There’s a lot you can convey to visitors by choosing the right color palette for designs, images and, yes, your text. But it’s not just the base color of the font that matters, it’s also the contrast between it and the background on which it sits (as evidenced by my note above about Flywheel Sports).

For some users, a white font on top of a busy photo or a lighter background may not pose too much of an issue. But “too much” isn’t really acceptable in web design. There should be no issues users encounter when they read text on a website, especially from an already compromised view of it on mobile.

Which is why color and contrast are top considerations you have to make when styling typography for mobile.

The Web Content Accessibility Guidelines (WCAG) has clear recommendations regarding how to address color contrast in section 1.4.3. At a minimum, the WCAG suggests that a contrast of 4.5 to 1 should be established between the text and background for optimal readability. There are a few exceptions to the rule:

  • Text sized using 18-point or a bold 14-point only needs a contrast of 3 to 1.
  • Text that doesn’t appear in an active part of the web page doesn’t need to abide by this rule.
  • The contrast of text within a logo can be set at the designer’s discretion.

If you’re unsure of how to establish that ratio between your font’s color and the background upon which it sits, use a color contrast checking tool like WebAIM.

An example of how to use the WebAIM color contrast checker tool. (Source: WebAIM) (Large preview)

The one thing I would ask you to be mindful of, however, is using opacity or other color settings that may compromise the color you’ve chosen. While the HEX color code will check out just fine in the tool, it may not be an accurate representation of how the color actually displays on a mobile device (or any screen, really).

To solve this problem and ensure you have a high enough contrast for your fonts, use a color eyedropper tool built into your browser like the ones for Firefox or Chrome. Simply hover the eyedropper over the color of the background (or font) on your web page, and let it tell you what the actual color code is now.

Here is an example of this in action: Dollar Shave Club.

This website has a rotation of images in the top banner of the home page. The font always remains white, but the background rotates.

Dollar Shave Club’s home page banner with a grey background. (Source: Dollar Shave Club) (Large preview) Dollar Shave Club’s home page banner with a beige/taupe background. (Source: Dollar Shave Club) (Large preview) Dollar Shave Club’s home page banner with a purple background. (Source: Dollar Shave Club) (Large preview)

Based on what we know now, the purple is probably the only one that will pass with flying colors. However, for the purposes of showing you how to work through this exercise, here is what the eyedropper tool says about the HEX color codes for each of the backgrounds:

  • Grey: #9a9a9a
  • Beige/taupe: #ffd0a8
  • Purple: #4c2c59.

Here is the contrast between these colors and the white font:

  • Grey: 2.81 to 1
  • Beige/taupe: 1.42 to 1
  • Purple: 11.59 to 1.

Clearly, the grey and beige backgrounds are going to lend themselves to a very poor experience for mobile visitors.

Also, if I had to guess, I’d say that “Try a risk-free Starter Set now.” is only a 10-point font (which is only about 13 pixels). So, the size of the font is also working against the readability factor, not to mention the poor choice of colors used with the lighter backgrounds.

The lesson here is that you should really make some time to think about how color and contrast of typography will work for the benefit of your readers. Without these additional steps, you may unintentionally be preventing visitors from moving forward on your site.

3. Tracking

Plain and simple: tracking in mobile web design needs to be used in order to control density. The standard recommendation is that there be no more than between 30 and 40 characters to a line. Anything more or less could affect readability adversely.

While it does appear that Dove is pushing the boundaries of that 40-character limit, I think this is nicely done.

Dove’s use of even tracking and (mostly) staying within the 40-character limit. (Source: Dove) (Large preview)

The font is so simple and clean, and the tracking is evenly spaced. You can see that, by keeping the amount of words on a line relegated to the recommended limits, it gives this segment of the page the appearance that it will be easy to read. And that’s exactly what you want your typography choices to do: to welcome visitors to stop for a brief moment, read the non-threatening amount of text, and then go on their way (which, hopefully, is to conversion).

4. Leading

According to the NNG, content that appears above the fold on a 30-inch desktop monitor equates to five swipes on a 4-inch mobile device. Granted, this data is a bit old as most smartphones are now between five and six inches:

Average smartphone screen sizes from 2015 to 2021. (Source: TechCrunch) (Large preview)

Even so, let’s say that equates to three or four good swipes of the smartphone screen to get to the tip of the fold on desktop. That’s a lot of work your mobile visitors have to do to get to the good stuff. It also means that their patience will already be wearing thin by the time they get there. As the NNG pointed out, a mobile session, on average, usually lasts about only 72 seconds. Compare that to desktop at 150 seconds and you can see why this is a big deal.

This means two things for you:

  1. You absolutely need to cut out the excess on mobile. If this means creating a completely separate and shorter set of content for mobile, do it.
  2. Be very careful with leading.

You’ve already taken care to keep optimize your font size and width, which is good. However, too much leading and you could unintentionally be asking users to scroll even more than they might have to. And with every scroll comes the possibility of fatigue, boredom, frustration, or distraction getting in the way.

So, you need to strike a good balance here between using line spacing to enhance readability while also reigning in how much work they need to do to get to the bottom of the page.

The Hill Holliday website isn’t just awesome inspiration on how to get a little “crazy” with mobile typography, but it also has done a fantastic job in using leading to make larger bodies of text easier to read:

Hill Holliday uses the perfect ratio of leading between lines and paragraphs. (Source: Hill Holliday) (Large preview)

Different resources will give you different guidelines on how to create spacing for mobile devices. I’ve seen suggestions for anywhere between 120% to 150% of the font’s point size. Since you also need to consider accessibility when designing for mobile, I’m going to suggest you follow WCAG’s guidelines:

  • Spacing between lines needs to be 1.5 (or 150%, whichever ratio works for you).
  • Spacing between paragraphs then needs to be 2.5 (or 250%).

At the end of the day, this is about making smart decisions with the space you’re given to work with. If you only have a minute to hook them, don’t waste it with too much vertical space. And don’t turn them off with too little.

5. Acceptable Fonts

Before I break down what makes for an acceptable font, I want to first look at what Android’s and Apple’s typeface defaults are. I think there’s a lot we can learn just by looking at these choices:

Android
Google uses two typefaces for its platforms (both desktop and mobile): Roboto and Noto. Roboto is the primary default. If a user visits a website in a language that doesn’t accept Roboto, then Noto is the secondary backup.

This is Roboto:

A snapshot of the Roboto character set. (Source: Roboto) (Large preview)

It’s also important to note that Roboto has a number of font families to choose from:

Other options of Roboto fonts to choose from. (Source: Roboto) (Large preview)

As you can see, there are versions of Roboto with condensed kerning, a heavier and serifed face as well as a looser, serif-like option. Overall, though, this is just a really clean and simply stylized typeface. You’re not likely to stir up any real emotions when using this on a website, and it may not convey much of a personality, but it’s a safe, smart choice.

Apple
Apple has its own set of typography guidelines for iOS along with its own system typeface: San Francisco.

The San Francisco font for Apple devices. (Source: San Francisco) (Large preview)

For the most part, what you see is what you get with San Francisco. It’s just a basic sans serif font. If you look at Apple’s recommended suggestions on default settings for the font, you’ll also find it doesn’t even recommend using bold stylization or outlandish sizing, leading or tracking rules:

Default settings and suggestions for the San Francisco typeface. (Source: San Francisco) (Large preview)

Like with pretty much everything else Apple does, the typography formula is very basic. And, you know what? It really works. Here it is in action on the Apple website:

Apple makes use of its own typography best practices. (Source: Apple) (Large preview)

Much like Google’s system typeface, Apple has gone with a simple and classic typeface. While it may not help your site stand out from the competition, it will never do anything to impair the legibility or readability of your text. It also would be a good choice if you want your visuals to leave a greater impact.

My Recommendations

And, so, this now brings me to my own recommendations on what you should use in terms of type for mobile websites. Here’s the verdict:

  1. Don’t be afraid to start with a system default font. They’re going to be your safest choices until you get a handle on how far you can push the limits of mobile typography.
  2. Use only a sans serif or serif font. If your desktop website uses a decorative or handwritten font, ditch it for something more traditional on mobile.

    That said, you don’t have to ignore decorative typefaces altogether. In the examples from Hill Holliday or Flywheel Sports (as shown above), you can see how small touches of custom, non-traditional type can add a little flavor.

  3. Never use more than two typefaces on mobile. There just isn’t enough room for visitors to handle that many options visually.

    Make sure your two typefaces complement one another. Specifically, look for faces that utilize a similar character width. The design of each face may be unique and contrast well with the other, but there should still be some uniformity in what you present to mobile visitors’ eyes.

  4. Avoid typefaces that don’t have a distinct set of characters. For instance, compare how the uppercase “i”, lowercase “l” and the number “1” appear beside one another. Here’s an example of the Myriad Pro typeface from the Typekit website:

    Myriad Pro’s typeface in action. (Source: Typekit) (Large preview)

    While the number “1” isn’t too problematic, the uppercase “i” (the first letter in this sequence) and the lowercase “l (the second) are just too similar. This can create some unwanted slowdowns in reading on mobile.

    Also, be sure to review how your font handles the conjunction of “r” and “n” beside one another. Can you differentiate each letter or do they smoosh together as one indistinguishable unit? Mobile visitors don’t have time to stop and figure out what those characters are, so make sure you use a typeface that gives each character its own space.

  5. Use fonts that are compatible across as many devices as possible. Your best bets will be: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS and Verdana.

    A list of system default typefaces for various mobile devices. (Source: tinytype) (Large preview) Another view of the table that includes some Android-supported typefaces. (Source: tinytype) (Large preview)

    I think the Typeform website is a good example of one that uses a “safe” typeface choice, but doesn’t prevent them from wowing visitors with their message or design.

    Typeform’s striking typeface has nothing to do with the actual font. (Source: Typeform) (Large preview)

    It’s short, to the point, perfectly sized, well-positioned, and overall a solid choice if they’re trying to demonstrate stability and professionalism (which I think they are).

  6. When you’re feeling comfortable with mobile typography and want to branch out a little more, take a look at this list of the best web-safe typefaces from WebsiteSetup. You’ll find here that most of the choices are your basic serif and sans serif types. It’s definitely nothing exciting or earth-shattering, but it will give you some variation to play with if you want to add a little more flavor to your mobile type.
Wrapping Up

I know, I know. Mobile typography is no fun. But web design isn’t always about creating something exciting and cutting edge. Sometimes sticking to practical and safe choices is what will guarantee you the best user experience in the end. And that’s what we’re seeing when it comes to mobile typography.

The reduced amount of real estate and the shorter times-on-site just don’t lend themselves well to the experimental typography choices (or design choices, in general) you can use on desktop. So, moving forward, your approach will have to be more about learning how to reign it in while still creating a strong and consistent look for your website.

(lf, ra, yk, il)
Categories: Web Design

Cheerful Desktop Wallpapers To Kick Off June (2018 Edition)

Wed, 05/30/2018 - 23:43
Cheerful Desktop Wallpapers To Kick Off June (2018 Edition) Cheerful Desktop Wallpapers To Kick Off June (2018 Edition) Cosima Mielke 2018-05-31T08:43:08+02:00 2018-06-14T13:28:26+00:00

We all need a little inspiration boost every once in a while. And, well, whatever your strategy to get your creative juices flowing might be, sometimes inspiration lies closer than you think. As close as your desktop even.

Since more than nine years, we’ve been asking the design community to create monthly desktop wallpaper calendars. Wallpapers that are a bit more distinctive as what you’ll usually find out there, bound to cater for a little in-between inspiration spark. Of course, it wasn’t any different this time around.

This post features wallpapers for June 2018. All of them come in versions with and without a calendar, so it’s up to you to decide if you want to have the month at a glance or keep things simple. As a bonus goodie, we also collected some timeless June favorites from past years for this edition (please note that they thus don’t come with a calendar). A big thank-you to all the artists who have submitted their wallpapers and are still diligently continuing to do so. It’s time to freshen up your desktop!

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?

Meet Smashing Book 6 with everything from design systems and accessible single-page apps to CSS Custom Properties, Grid, Service Workers, performance, AR/VR and responsive art direction. New frontiers in front-end and UX with Marcy Sutton, Harry Roberts, Laura Elizabeth and many others.

Table of Contents → Travel Time

“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — Designed by PopArt Studio from Serbia.

Tropical Vibes

“With summer just around the corner, I’m already feeling the tropical vibes.” — Designed by Melissa Bogemans from Belgium.

No Matter What, I’ll Be There

“June is the month when we celebrate our dads and to me the best ones are the ones that even if they don’t like what you are doing they’ll be by your side.” — Designed by Maria Keller from Mexico.

We Sailed Across The Summer Sea

“Summer is the season of family trips, outings and holidays. What better way is there to celeberate Father’s Day, than to enjoy the summer sailing across with father beloved.” — Designed by The Whisky Corporation from Singapore.

Sounds Of Rain

“When it rains the world softens and listens to the gentle pattering of the rain. It gets covered in a green vegetation and puddles reflect the colors of nature now looking fresh and cleansed. The lullaby of the rain is accustomed to creaky frogs and soft chirping birds taking you to ecstasy.” — Designed by Aviv Digital from India.

-SmashingConf Toronto

“What’s the best way to learn? By observing designers and developers working live. For our new conference in Toronto, the speakers aren’t allowed to use any slides at all. Welcome SmashingConf #noslides, a brand new conference in Toronto, full of interactive live sessions, showing how web designers design and how web developers build — including setup, workflow, design thinking, naming conventions and everything in-between.” — Designed by Ricardo Gimenes from Brazil.

Are You Ready?

“The excitement is building, the slogans are ready, the roaring and the cheering make their way… Russia is all set for the football showdown. Are you ready?” — Designed by Sweans from London.

Summer Surf

“Summer vibes…” — Designed by Antun Hirsman from Croatia.

Stop Child Labor

“‘Child labor and poverty are inevitably bound together, and if you continue to use the labor of children as the treatment for the social disease of poverty, you will have both poverty and child labor to the end of time.’ (Grace Abbott)” — Designed by Dipanjan Karmakar from India.

June Best-Of

Some things are too good to be forgotten. That’s why we dug out some June favorites from our archives. Please note that these don’t come with a calendar because of this. Enjoy!

Oh, The Places You Will Go!

“In celebration of high school and college graduates ready to make their way in the world!” — Designed by Bri Loesch from the United States.

Join The Wave

“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — Designed by PopArt Studio from Serbia.

Solstice Sunset

“June 21 marks the longest day of the year for the Northern Hemisphere - and sunsets like these will be getting earlier and earlier after that!” — Designed by James Mitchell from the United Kingdom.

Midsummer Night’s Dream

“The summer solstice in the northern hemisphere is nigh. Every June 21 we celebrate the longest day of the year and, very often, end up dancing like pagans. Being landlocked, we here in Serbia can only dream about tidal waves and having fun at the beach. What will your Midsummer Night’s Dream be?” — Designed by PopArt Studio from Serbia.

Flamingood Vibes Only

“I love flamingos! They give me a happy feeling that I want to share with the world.” — Designed by Melissa Bogemans from Belgium.

Papa Merman

“Dream away for a little while to a land where June never ends. Imagine the ocean, feel the joy of a happy and carefree life with a scent of shrimps and a sound of waves all year round. Welcome to the world of Papa Merman!” — Designed by GraphicMama from Bulgaria.

Strawberry Fields

Designed by Nathalie Ouederni from France.

Fishing Is My Passion!

“The month of June is a wonderful time to go fishing, the most soothing and peaceful activity.” — Designed by Igor Izhik from Canada.

Summer Time

“Summer is coming so I made this simple pattern with all my favorite summer things.” — Designed by Maria Keller from Mexico.

The Amazing Water Park

“Summer is coming. And it’s going to be like an amazing water park, full of stunning encounters.” — Designed by Netzbewegung / Mario Metzger from Germany.

Gravity

Designed by Elise Vanoorbeek (Doud Design) from Belgium.

Periodic Table Of HTML5 Elements

“We wanted an easy reference guide to help navigate through HTML5 and that could be updateable” — Designed by Castus from the UK.

Ice Creams Away!

“Summer is taking off with some magical ice cream hot air balloons.” — Designed by Sasha Endoh from Canada

Lavender Is In The Air!

“June always reminds me of lavender — it just smells wonderful and fresh. For this wallpaper I wanted to create a simple, yet functional design that featured… you guessed it… lavender!” — Designed by Jon Phillips from Canada.

Ice Cream June

“For me, June always marks the beginning of summer! The best way to celebrate summer is of course ice cream, what else?” — Designed by Tatiana Anagnostaki from Greece.

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!

Categories: Web Design

Pages