FEED Validator

for Atom and RSS and KML

Sorry

This feed does not validate.

line 14, column 32: Invalid email address: Suzanna Scacca (15 occurrences) [help]

          <author>Suzanna Scacca</author>
                                ^

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 22, column 0: content:encoded should not contain html tag (15 occurrences) [help]
```
        <content:encoded><![CDATA[
```
line 23, column 0: content:encoded should not contain head tag (15 occurrences) [help]
```
          <html>
```
line 24, column 0: content:encoded should not contain meta tag (15 occurrences) [help]
```
            <head>
```
line 25, column 0: content:encoded should not contain link tag (15 occurrences) [help]
```
              <meta charset="utf-8">
```

line 26, column 0: content:encoded should not contain title tag (15 occurrences) [help]

              <link rel="canonical" href="https://www.smashingmagazine.com/2 ...

line 28, column 0: content:encoded should not contain body tag (15 occurrences) [help]
```
            </head>
```
line 51, column 0: content:encoded should not contain data-audience attribute (34 occurrences) [help]
line 84, column 0: content:encoded should not contain data-tablesaw-mode attribute (4 occurrences) [help]
line 84, column 0: content:encoded should not contain data-tablesaw-minimap attribute (4 occurrences) [help]
line 87, column 0: content:encoded should not contain data-tablesaw-priority attribute (4 occurrences) [help]
```
        <tr>
```
line 226, column 0: content:encoded should not contain sizes attribute (84 occurrences) [help]
```
	
```
line 458, column 0: content:encoded should not contain data-impression attribute (19 occurrences) [help]
line 458, column 0: content:encoded should not contain data-remove attribute (22 occurrences) [help]
line 1810, column 0: Non-html tag: value [help]
```
<ul>
```
line 2330, column 11: content:encoded should not contain relative URL references: #podcasts-for-web-developers (21 occurrences) [help]
```
        ]]></content:encoded>
           ^
```
line 7074, column 0: content:encoded should not contain aria-label attribute [help]
line 7250, column 0: content:encoded should not contain iframe tag (2 occurrences) [help]
line 7754, column 0: content:encoded should not contain data-height attribute (3 occurrences) [help]
line 7754, column 0: content:encoded should not contain data-theme-id attribute (3 occurrences) [help]
line 7754, column 0: content:encoded should not contain data-slug-hash attribute (3 occurrences) [help]
line 7754, column 0: content:encoded should not contain data-user attribute (3 occurrences) [help]
line 7754, column 0: content:encoded should not contain data-default-tab attribute (3 occurrences) [help]
line 8340, column 2: Missing atom:link with rel="self" [help]
```
  </channel>
  ^
```

Source: http://rss1.smashingmagazine.com/feed/

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Articles on Smashing Magazine — For Web Designers And Developers</title>
<link>https://www.smashingmagazine.com/articles/</link>
<description>Recent content in Articles on Smashing Magazine — For Web Designers And Developers</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Fri, 20 Apr 2018 15:32:23 +0000</lastBuildDate>
<item>
<author>Suzanna Scacca</author>
<title>What You Need To Know To Increase Mobile Checkout Conversions</title>
<link>https://www.smashingmagazine.com/2018/04/increasing-mobile-checkout-conversions/</link>
<pubDate>Fri, 20 Apr 2018 13:35:58 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/increasing-mobile-checkout-conversions/</guid>
<description>Google’s mobile-first indexing is here. Well, for some websites anyway. For the rest of us, it will be here soon enough, and our websites need to be in tip-top shape if we don’t want search rankings to be adversely affected by the change.
That said, responsive web design is nothing new. We’ve been creating custom mobile user experiences for years now, so most of our websites should be well poised to take this on… right?</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/increasing-mobile-checkout-conversions/" />
<title>What You Need To Know To Increase Mobile Checkout Conversions</title>
</head>
<body>
<article>
<header>
<h1>What You Need To Know To Increase Mobile Checkout Conversions</h1>
<address>Suzanna Scacca</address>
<time datetime="2018-04-20T13:35:58+02:00" class="op-published">2018-04-20T13:35:58+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p><a href="https://webmasters.googleblog.com/2017/12/getting-your-site-ready-for-mobile.html">Google’s mobile-first indexing</a> is here. Well, for some websites anyway. For the rest of us, it will be here soon enough, and our websites need to be in tip-top shape if we don’t want search rankings to be adversely affected by the change.</p>
<p>That said, responsive web design is nothing new. We’ve been creating custom mobile user experiences for years now, so most of our websites should be well poised to take this on… right?</p>
<p>Here’s the problem: Research shows that the dominant device through which users access the web, <em>on average</em>, is the smartphone. Granted, this might not be the case for every website, but the data indicates that this is the direction we’re headed in, and so every web designer should be prepared for it.</p>
<p>However, mobile checkout conversions are, to put it bluntly, not good. There are a number of reasons for this, but that doesn’t mean that m-commerce designers should take this lying down.</p>
<p>As more mobile users rely on their smart devices to access the web, websites need to be more adeptly designed to give them the simplified, convenient and secure checkout experience they want. In the following roundup, I’m going to explore some of the impediments to conversion in the mobile checkout and focus on what web designers can do to improve the experience.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Getting the process <em>just</em> right ain't an easy task. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works really well for them. A part of the <a href="https://www.smashingmagazine.com/membership/">Smashing Membership</a>, of course.</p>
<a href="https://www.smashingmagazine.com/membership/" class="btn btn--green btn--large">
Explore features →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-scubadiving-panel.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<h3>Why Are Mobile Checkout Conversions Lagging?</h3>
<p>According to the data, prioritizing the mobile experience in our web design strategies is a smart move for everyone involved. With people spending roughly <a href="https://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/">51% of their time with digital media</a> through mobile devices (as opposed to only 42% on desktop), search engines and websites really do need to align with user trends.</p>
<p>Now, while that statistic paints a positive picture in support of designing websites with a mobile-first approach, other statistics are floating around that might make you wary of it. Here’s why I say that: <a href="https://info.monetate.com/ecommerce-quarterly-report-q1-2017.html">Monetate’s e-commerce quarterly report</a> issued for Q1 2017 had some really interesting data to show.</p>
<p>In this first table, they break down the percentage of visitors to e-commerce websites using different devices between Q1 2016 and Q1 2017. As you can see, smartphone Internet access has indeed surpassed desktop:</p>
<p><table class="tablesaw break-out" data-tablesaw-mode="swipe" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Website Visits by Device</th>
<th>Q1 2016</th>
<th>Q2 2016</th>
<th>Q3 2016</th>
<th>Q4 2016</th>
<th>Q1 2017</th>
</tr>
</thead>
<tbody>
<tr>
<td>Traditional</td>
<td>49.30%</td>
<td>47.50%</td>
<td>44.28%</td>
<td>42.83%</td>
<td>42.83%</td>
</tr>
<tr>
<td>Smartphone</td>
<td>36.46%</td>
<td>39.00%</td>
<td>43.07%</td>
<td>44.89%</td>
<td>44.89%</td>
</tr>
<tr>
<td>Other</td>
<td>0.62%</td>
<td>0.39%</td>
<td>0.46%</td>
<td>0.36%</td>
<td>0.36%</td>
</tr>
<tr>
<td>Tablet</td>
<td>13.62%</td>
<td>13.11%</td>
<td>12.19%</td>
<td>11.91%</td>
<td>11.91%</td>
</tr>
</tbody>
</table>
<p><em>Monetate’s findings on which devices are used to access in the Internet. (<a href="https://info.monetate.com/ecommerce-quarterly-report-q1-2017.html">Source</a>)</em></p></p>
<p>In this next data set, we can see that the average conversion rate for e-commerce websites isn’t great. In fact, the number has gone down significantly since the first quarter of 2016.</p>
<p><table class="tablesaw break-out" data-tablesaw-mode="swipe" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Conversion Rates</th>
<th>Q1 2016</th>
<th>Q2 2016</th>
<th>Q3 2016</th>
<th>Q4 2016</th>
<th>Q1 2017</th>
</tr>
</thead>
<tbody>
<tr>
<td>Global</td>
<td>3.10%</td>
<td>2.81%</td>
<td>2.52%</td>
<td>2.94%</td>
<td>2.48%</td>
</tr>
</tbody>
</table>
<p><em>Monetate’s findings on overall e-commerce global conversion rates (for all devices). (<a href="https://info.monetate.com/ecommerce-quarterly-report-q1-2017.html">Source</a>)</em></figcaption></p>
<p>Even more shocking is the split between device conversion rates:</p>
<p><table class="tablesaw break-out" data-tablesaw-mode="swipe" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Conversion Rates by Device</th>
<th>Q1 2016</th>
<th>Q2 2016</th>
<th>Q3 2016</th>
<th>Q4 2016</th>
<th>Q1 2017</th>
</tr>
</thead>
<tbody>
<tr>
<td>Traditional</td>
<td>4.23%</td>
<td>3.88%</td>
<td>3.66%</td>
<td>4.25%</td>
<td>3.63%</td>
</tr>
<tr>
<td>Tablet</td>
<td>1.42%</td>
<td>1.31%</td>
<td>1.17%</td>
<td>1.49%</td>
<td>1.25%</td>
</tr>
<tr>
<td>Other</td>
<td>0.69%</td>
<td>0.35%</td>
<td>0.50%</td>
<td>0.35%</td>
<td>0.27%</td>
</tr>
<tr>
<td>Smartphone</td>
<td>3.59%</td>
<td>3.44%</td>
<td>3.21%</td>
<td>3.79%</td>
<td>3.14%</td>
</tr>
</tbody>
</table>
<p><em>Monetate’s findings on the average conversion rates, broken down by device. (<a href="https://info.monetate.com/ecommerce-quarterly-report-q1-2017.html">Source</a>)</em></p></p>
<p>Smartphones consistently receive fewer conversions than desktop, despite being the predominant device through which users access the web.</p>
<p>What’s the problem here? Why are we able to get people to mobile websites, but we lose them at checkout?</p>
<p>In its report from 2017 named “<a href="https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs">Mobile’s Hierarchy of Needs</a>,” comScore breaks down the top five reasons why mobile checkout conversion rates are so low:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png"
sizes="100vw"
alt="Reasons why m-commerce doesn’t convert"
/>
<figcaption class="op-vertical-bottom">
The most common reasons why m-commerce shoppers don’t convert. (Image: <a href='https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/Mobiles-Hierarchy-of-Needs'>comScore</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d0b029cf-a13b-41b4-bae4-604edceb89b9/comscore-conversion-rates.png'>View large version</a>)
</figcaption>
</figure>
<p>Here is the breakdown for why mobile users don’t convert:</p>
<ul>
<li>20.2% — security concerns</li>
<li>19.6% — unclear product details</li>
<li>19.6% — inability to open multiple browser tabs to compare</li>
<li>19.3% — difficulty navigating</li>
<li>18.6% — difficulty inputting information.</li>
</ul>
<p>Those are plausible reasons to move from the smartphone to the desktop to complete a purchase (if they haven’t been completely turned off by the experience by that point, that is).</p>
<p>In sum, we know that consumers want to access the web through their mobile devices. We also know that barriers to conversion are keeping them from staying put. So, how do we deal with this?</p>
<h3>10 Ways to Increase Mobile Checkout Conversions In 2018</h3>
<p>For most of the websites you’ve designed, you’re not likely to see much of a change in search ranking when Google’s mobile-first indexing becomes official.</p>
<p>Your mobile-friendly designs might be “good enough” to keep your websites at the top of search (to start, anyway), but what happens if visitors don’t stick around to convert? Will Google start penalizing you because your website can’t seal the deal with the majority of visitors? In all honesty, that scenario will only occur in extreme cases, where the mobile checkout is so poorly constructed that bounce rates skyrocket and people stop wanting to visit the website at all.</p>
<p>Let’s say that the drop-off in traffic at checkout doesn’t incur penalties from Google. That’s great… for SEO purposes. But what about for business? Your goal is to get visitors to convert without distraction and without friction. Yet, that seems to be what mobile visitors get.</p>
<p>Going forward, your goal needs to be two-fold:</p>
<ul>
<li>to design websites with Google’s mobile-first mission and guidelines in mind,</li>
<li>to keep mobile users on the website until they complete a purchase.</li>
</ul>
<p>Essentially, this means decreasing the amount of work users have to do and improving the visibility of your security measures. Here is what you can do to more effectively design mobile checkouts for conversions.</p>
<h4>1. Keep the Essentials in the Thumb Zone</h4>
<p>Research on <a href="https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php">how users hold their mobile phones</a> is old hat by now. We know that, whether they use the single- or double-handed approach, certain parts of the mobile screen are just inconvenient for mobile users to reach. And when expediency is expected during checkout, this is something you don’t want to mess around with.</p>
<p>For single-handed users, the middle of the screen is the prime playing field:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png"
sizes="100vw"
alt="The thumb zone for single-handed mobile"
/>
<figcaption class="op-vertical-bottom">
The good, OK and bad areas for single-handed mobile users. (Image: <a href='https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php'>UX Matters</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4a01d1ff-2aa6-42ec-802e-e62b1cef0f7b/single-handed-mobile.png'>View large version</a>)
</figcaption>
</figure>
<p>Although users who cradle their phones for greater stability have a couple options for which fingers to use to interact with the screen, only 28% use their index finger. So, let’s focus on the capabilities of thumb users, which, again, means giving the central part of the screen the most prominence:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png"
sizes="100vw"
alt="The thumb and index finger zone for mobile cradling"
/>
<figcaption class="op-vertical-bottom">
The good, OK and bad areas for mobile users that cradle their phones. (Image: <a href='https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php'>UX Matters</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24d27bb9-f431-49b1-8798-e18559cb10b4/mobile-fingers.png'>View large version</a>)
</figcaption>
</figure>
<p>Some users hold their phones with two hands. Because the horizontal orientation is more likely to be used for video, this won’t be relevant for mobile checkout. So, pay attention to how much space of that screen is feasibly within reach of the user’s thumb:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png"
sizes="100vw"
alt="The thumb zone for vertical and horizontal"
/>
<figcaption class="op-vertical-bottom">
The good, OK and bad areas for two-handed mobile users. (Image: <a href='https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php'>UX Matters</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c44c210-8e64-4f71-884d-bc993db0554f/vertical-horizontal-mobile.png'>View large version</a>)
</figcaption>
</figure>
<p>In sum, we can use <a href="https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/">Smashing Magazine’s breakdown</a> of where to focus content, regardless of left-hand, right-hand or two-handed holding of a smartphone:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png"
sizes="100vw"
alt="Where the ideal thumb zone is on mobile"
/>
<figcaption class="op-vertical-bottom">
A summary of where the good, OK and bad zones are on mobile devices. (Image: <a href='https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/'>Smashing Magazine</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0732b888-4e74-40b8-aee5-74acbba7fa04/left-right-mobile.png'>View large version</a>)
</figcaption>
</figure>
<p><a href="https://www.jcpenney.com/">JCPenney’s website</a> is a good example of how to do this:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG"
sizes="100vw"
alt="JCPenney’s form is in the thumb zone"
/>
<figcaption class="op-vertical-bottom">
JCPenney’s contact form starts midway down the page. (Image: <a href='https://www.jcpenney.com/'>JCPenney</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed5be663-6507-4da0-bdf2-6244b5dc9586/jcpenney-form-placement.PNG'>View large version</a>)
</figcaption>
</figure>
<p>While information is included at the top of the checkout page, the input fields don’t start until just below the middle of it — directly in the ideal thumb zone for users of any type. This ensures that visitors holding their phones in any manner and using different fingers to engage with it will have no issue reaching the form fields.</p>
<h4>2. Minimize Content to Maximize Speed</h4>
<p>We’ve been taught over and over again that minimal design is best for websites. This is especially true in mobile checkout, where an already slow or frustrating experience could easily push a customer over the edge, when all they want to do is be done with the purchase.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>To maximize speed during the mobile checkout process, keep the following tips in mind:</p>
<ul>
<li>Only add the essentials to checkout. This is not the time to try to upsell or cross-sell, promote social media or otherwise distract from the action at hand.</li>
<li>Keep the checkout free of all images. The only eye-catching visuals that are really acceptable are trustmarks and calls to action (more on these below).</li>
<li>Any text included on the page should be instructional or descriptive in nature.</li>
<li>Avoid any special stylization of fonts. The less “wow” your checkout page has, the easier it will be for users to get through the process.</li>
</ul>
<p>Look to <a href="https://www.staples.com/">Staples</a>’ website as an example of what a highly simple single-page checkout should look like:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG"
sizes="100vw"
alt="The single-page checkout for Staples"
/>
<figcaption class="op-vertical-bottom">
Staples has a single-page checkout with a minimal number of fields to fill out. (Image: <a href='https://www.staples.com/'>Staples</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dfecb586-cb2c-40fc-83fa-3f9eec9e9a1d/staples-simplicity.PNG'>View large version</a>)
</figcaption>
</figure>
<p>As you can see, Staples doesn’t bog down the checkout process with product images, branding, navigation, internal links or anything else that might (1) distract from the task at hand, or (2) suck resources from the server while it attempts to process your customers’ requests.</p>
<p>Not only will this checkout page be easy to get through, but it will load quickly and without issue every time — something customers will remember the next time they need to make a purchase. By keeping your checkout pages light in design, you ensure a speedy experience in all aspects.</p>
<h4>3. Put Them at Ease With Trustmarks</h4>
<p>A trustmark is any indicator on a website that lets customers know, “Hey, there’s absolutely nothing to worry about here. We’re keeping your information safe!”</p>
<p>The one trustmark that every m-commerce website should have? An SSL certificate. Without one, the address bar will not display the lock sign or the green <code>https</code> domain name — both of which let customers know that the website has extra encryption.</p>
<p>You can use other trustmarks at checkout as well.</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png"
sizes="100vw"
alt="Big Chill uses a RapidSSL trust seal"
/>
<figcaption class="op-vertical-bottom">
Big Chill includes a RapidSSL trust seal to let customers know its data is encrypted. (Image: <a href='https://bigchill.com/'>Big Chill</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85e36c44-714b-4ad7-a5f8-e28762ffcd00/big-chill-trustmark.png'>View large version</a>)
</figcaption>
</figure>
<p>While you can use logos from <a href="https://us.norton.com/">Norton Security</a>, <a href="https://www.pcisecuritystandards.org/">PCI compliance</a> and other security software to let customers know your website is protected, users might also be swayed by recognizable and well-trusted names. When you think about it, this isn’t much different than displaying corporate logos beside customer testimonials or in callouts that boast of your big-name connections. If you can leverage a partnership like the ones mentioned below, you can use the inherent trust there to your benefit.</p>
<p>Take <a href="https://www.6pm.com/">6pm</a>, which uses a “Login with Amazon” option at checkout:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG"
sizes="100vw"
alt="6pm uses an Amazon trustmark"
/>
<figcaption class="op-vertical-bottom">
6pm leverages the Amazon name as a trustmark. (Image: <a href='https://www.6pm.com/'>6pm</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35905e35-7425-40b7-8f4d-c03069529c49/6-pm-trustmark.PNG'>View large version</a>)
</figcaption>
</figure>
<p>This is a smart move for a brand that most definitely does not have the brand-name recognition that a company like Amazon has. By giving customers a convenient option to log in with a brand that’s synonymous with speed, reliability and trust, the company might now become known for those same checkout qualities that Amazon is celebrated for.</p>
<p>Then, there are mobile checkout pages like the one on <a href="https://www.sephora.com/">Sephora</a>:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG"
sizes="100vw"
alt="Sephora’s PayPal trustmark"
/>
<figcaption class="op-vertical-bottom">
Sephora uses a trusted payment gateway provider as a trustmark. (Image: <a href='https://www.sephora.com/'>Sephora</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3b11e5e9-5827-4716-b0a6-064500f38bf8/sephora-trustmark.PNG'>View large version</a>)
</figcaption>
</figure>
<p>Sephora also uses this technique of leveraging another brand’s good name in order to build trust at checkout time. In this case, however, it presents customers with two clear options: Check out with us right now, or hop over to PayPal, which will take care of you securely. With security being a major concern that keeps mobile customers from converting, this kind of trustmark and payment method is a good move on Sephora’s part.</p>
<h4>4. Provide Easier Editing</h4>
<p>In general, never take a visitor (on any device) away from whatever they’re doing on your website. There are already enough distractions online; the last thing they need is for <em>you</em> to point them in a direction that keeps them from converting.</p>
<p>At checkout, however, your customers might feel compelled to do this very thing if they decide they want a different color, size or quantity of an item in their shopping cart. Rather than let them backtrack through the website, give them an in-checkout editing option to keep them in place.</p>
<p><a href="https://www.victoriassecret.com/">Victoria’s Secret</a> does this well:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG"
sizes="100vw"
alt="Victoria’s Secret edit lightbox in checkout"
/>
<figcaption class="op-vertical-bottom">
Victoria’s Secret doesn’t force users away from checkout to edit items. (Image: <a href='https://www.victoriassecret.com/'>Victoria’s Secret</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32685fe2-8219-4641-afb4-6811b7d98555/victorias-secret-checkout-edits.PNG'>View large version</a>)
</figcaption>
</figure>
<p>When they first get to the checkout screen, customers will see a list of items they’re about to purchase. When the large “Edit” button beside each item is clicked, a lightbox (shown above) opens with the product’s variations. It’s basically the original product page, just superimposed on top of the checkout. Users can adjust their options and save their changes without ever having to leave the checkout page.</p>
<p>If you find, in reviewing your website’s analytics, that users occasionally backtrack after hitting the checkout (you can see this in the sales funnel), add this built-in editing feature. By preventing this unnecessary movement backwards, you could save yourself lost conversions from confused or distracted customers.</p>
<h4>5. Enable Express Checkout Options</h4>
<p>When consumers check out on an e-commerce website through a desktop device, it probably isn’t a big deal if they have to input their user name, email address or payment information each time. Sure, if it can be avoided, they’ll find ways around it (like allowing the website to save their information or using a password manager such as LastPass).</p>
<p>But on mobile, re-entering that information is a pain, especially if contact forms aren’t optimized well (more on that below). So, to ease the log-in and checkout process for mobile users, consider ways in which you can simplify the process:</p>
<ul>
<li>Allow for guest checkout.</li>
<li>Allow for one-click expedited checkout.</li>
<li>Enable one-click sign-in from a trusted source, like Facebook.</li>
<li>Enable payment on a trusted payment provider’s website, like PayPal, Google Wallet or Stripe.</li>
</ul>
<p>One of the nice things about <a href="https://www.sephora.com/">Sephora</a>'s already convenient checkout process is that customers can automate the sign-in process going forward with a simple toggle:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG"
sizes="100vw"
alt="Sephora lets customers save sign-in information"
/>
<figcaption class="op-vertical-bottom">
Sephora enables return customers to stay signed in, to avoid this during checkout again. (Image: <a href='https://www.sephora.com/'>Sephora</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16b34d00-8293-4d26-a519-945a7186cd89/sephora-streamlined-signin.PNG'>View large version</a>)
</figcaption>
</figure>
<p>When mobile customers are feeling the rush and want to get to the next stage of checkout, Sephora’s auto-sign-in feature would definitely come in handy and encourage customers to buy more frequently from the mobile website.</p>
<p>Many mobile websites wait until the bottom of the login page to tell customers what kinds of options they have for checking out. But rather than surprise them late, <a href="https://www.victoriassecret.com/">Victoria’s Secret</a> displays this information in big bold buttons right at the very top:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG"
sizes="100vw"
alt="Victoria’s Secret express checkout options"
/>
<figcaption class="op-vertical-bottom">
Victoria’s Secret simplifies and speeds up checkout by giving three attractive options. (Image: <a href='https://www.victoriassecret.com/'>Victoria’s Secret</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd39c728-2319-4998-8562-dc47b4d4f30a/victorias-secret-express-checkout.PNG'>View large version</a>)
</figcaption>
</figure>
<p>Customers have a choice of signing in with their account, checking out as a guest or going directly to PayPal. They are not surprised to discover later on that their preferred checkout or payment method isn’t offered.</p>
<p>I also really love how Victoria’s Secret has chosen to do this. There’s something nice about the brightly colored “Sign In” button sitting beside the more muted “Check Out as a Guest” button. For one, it adds a hint of Victoria’s Secret brand colors to the checkout, which is always a nice touch. But the way it’s colored the buttons also makes clear what it wants the primary action to be (i.e. to create an account and sign in).</p>
<h4>6. Add Breadcrumbs</h4>
<p>When you send mobile customers to checkout, the last thing you want is to give them unnecessary distractions. That’s why the website’s standard navigation bar (or hamburger menu) is typically removed from this page.</p>
<p>Nonetheless, the checkout process can be intimidating if customers don’t know what’s ahead. How many forms will they need to fill out? What sort of information is needed? Will they have a chance to review their order before submitting payment details?</p>
<p>If you’ve designed a multi-page checkout, allay your customers’ fears by defining each step with clearly labeled breadcrumb navigation at the top of the page. In addition, this will give your checkout a cleaner design, reducing the number of clicks and scrolling per page.</p>
<p><a href="https://www.hayneedle.com/">Hayneedle</a> has a beautiful example of breadcrumb navigation in action:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG"
sizes="100vw"
alt="Hayneedle checkout breadcrumb navigation"
/>
<figcaption class="op-vertical-bottom">
Hayneedle’s breadcrumbs are cleanly designed and easy to find. (Image: <a href='https://www.hayneedle.com/'>Hayneedle</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/224ddaaf-1197-4d33-9982-9c8dd582aae5/hayneedle-breadcrumbs.PNG'>View large version</a>)
</figcaption>
</figure>
<p>You can see that three steps are broken out and clearly labeled. There’s absolutely no question here about what users will encounter in those steps either, which will help put their minds at ease. Three steps seems reasonable enough, and users will have a chance to review the order once more before completing the purchase.</p>
<p><a href="https://www.sephora.com/">Sephora</a> has an alternative style of “breadcrumbs” in its checkout:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG"
sizes="100vw"
alt="Sephora’s numbered breadcrumbs navigation"
/>
<figcaption class="op-vertical-bottom">
Sephora’s numbered breadcrumbs appear as you complete each section. (Image: <a href='https://www.sephora.com/'>Sephora</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0849f5a7-04a2-4496-8119-e85b556a40b8/sephora-breadcrumbs.PNG'>View large version</a>)
</figcaption>
</figure>
<p>Instead of placing each “breadcrumb” at the top of the checkout page, Sephora’s customers can see what the next step is, as well as how many more are to come as they work their way through the form.</p>
<p>This is a good option to take if you’d rather not make the top navigation or the breadcrumbs sticky. Instead, you can prioritize the call to action (CTA), which you might find better motivates the customer to move down the page and complete their purchase.</p>
<p>I think both of these breadcrumbs designs are valid, though. So, it might be worth A/B testing them if you’re unsure of which would lead to more conversions for your visitors.</p>
<h4>7. Format the Checkout Form Wisely</h4>
<p>Good mobile checkout form design follows a pretty strict formula, which isn’t surprising. While there are ways to bend the rules on desktop in terms of structuring the form, the number of steps per page, the inclusion of images and so on, you really don’t have that kind of flexibility on mobile.</p>
<p>Instead, you will need to be meticulous when building the form:</p>
<ul>
<li>Design each field of the checkout form so that it stretches the full width of the website.</li>
<li>Limit the fields to only what’s essential.</li>
<li>Clearly label each field outside of and above it.</li>
<li>Use at least a 16-point-pixel font.</li>
<li>Format each field so that it’s large enough to tap into without zooming.</li>
<li>Use a recognizable mark to indicate when something is required (like an asterisk).</li>
<li>Always let users know when an error has been made immediately after the information has been inputted in a field.</li>
<li>Place the call to action at the very bottom of the form.</li>
</ul>
<p>Because the checkout form is the most important element that moves customers through the checkout process, you can’t afford to mess around with a tried and true formula. If users can’t seamlessly get from top to bottom, if the fields are too difficult to engage with, or if the functionality of the form itself is riddled with errors, then you might as well kiss your mobile purchases (and maybe your purchases in general) goodbye.</p>
<p><a href="https://www.crutchfield.com/">Crutchfield</a> shows how to create form fields that are very user-friendly on mobile:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG"
sizes="100vw"
alt="Large-sized form fields on the Crutchfield checkout"
/>
<figcaption class="op-vertical-bottom">
Form fields on the Crutchfield checkout page are large and difficult to miss. (Image: <a href='https://www.crutchfield.com/'>Crutchfield</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f3a3e70-c9fb-4254-9e96-ac7f5da840f6/crutchfield-big-buttons.PNG'>View large version</a>)
</figcaption>
</figure>
<p>As you can see, each field is large enough to click on (even with fat fingers). The bold outline around the currently selected field is also a nice touch. For a customer who is multitasking and or distracted by something around them, returning to the checkout form would be much easier with this type of format.</p>
<p><a href="https://www.sephora.com/">Sephora</a>, again, handles mobile checkout the right way. In this case, I want to draw your attention to the grayed-out “Place Order” button:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG"
sizes="100vw"
alt="Smart use of the Sephora call to action in checkout"
/>
<figcaption class="op-vertical-bottom">
Sephora uses the call to action as a guide for customers who haven’t finished the form. (Image: <a href='https://www.sephora.com/'>Sephora</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/26d09371-5e91-44e8-aa03-ec5b09a46f84/sephora-faded-button.PNG'>View large version</a>)
</figcaption>
</figure>
<p>The button serves as an indicator to customers that they’re not quite ready to submit their purchase information yet, which is great. Even though the form is beautifully designed — everything is well labeled, the fields are large, and the form is logically organized — mobile users could accidentally scroll too far past a field and wouldn’t know it until clicking the call-to-action button.</p>
<p>If you can keep users from receiving that dreaded “missing information” error, you’ll do a better job of holding onto their purchases.</p>
<h4>8. Simplify Form Input</h4>
<p>Digging a bit deeper into these contact forms, let’s look at how you can simplify the input of data on mobile:</p>
<ul>
<li>Allow customers to user their browser’s autocomplete functionality to fill in forms.</li>
<li>Include a <code>tabindex</code> HTML directive to enable customers to tap an arrow up and down through the form. This keeps their thumbs within a comfortable range on the smartphone at all times, instead of constantly reaching up to tap into a new field.</li>
<li>Add a checkbox that automatically copies the billing address information over to the shipping fields.</li>
<li>Change the keyboard according to what kind of field is being typed in.</li>
</ul>
<p>One example of this is <a href="https://www.basspro.com/">Bass Pro Shops</a>’ mobile website:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG"
sizes="100vw"
alt="Bass Pro checkout form uses a smart keyboard"
/>
<figcaption class="op-vertical-bottom">
Each field in the Bass Pro checkout form provides users with the right keyboard type. (Image: <a href='https://www.basspro.com/'>Bass Pro Shops</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed735c71-a208-45ba-a259-742c059c36fc/bass-pro-keyboard.PNG'>View large version</a>)
</figcaption>
</figure>
<p>For starters, the keyboard uses tab functionality (see the up and down arrows just above the keyboard). For customers with short fingers or who are impatient and just want to type away on the keyboard, the tabs help keep their hands in one place, thus speeding up checkout.</p>
<p>Also, when customers tab into a numbers-only field (like for their phone number), the keyboard automatically changes, so they don’t have to switch manually. Again, this is another way to up the convenience of making a purchase on mobile.</p>
<p><a href="https://www.amazon.com/">Amazon</a>’s mobile checkout includes a quick checkbox that streamlines customers’ submission of billing information:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG"
sizes="100vw"
alt="Amazon streamlines form input with address duplication"
/>
<figcaption class="op-vertical-bottom">
Amazon gives customers an easy way to duplicate their shipping address to billing. (Image: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e89a4e6a-b065-4ec0-8534-be2bef845f54/amazon-dupe-address.PNG'>View large version</a>)
</figcaption>
</figure>
<p>As we’ve seen with mobile checkout form design, simpler is always better. Obviously, you will always need to collect certain details from customers each time (unless their account has saved that information). Nonetheless, if you can provide a quick toggle or checkbox that enables them to copy data over from one form to another, then do it.</p>
<h4>9. Don’t Skimp on the CTA</h4>
<p>When designing a desktop checkout, your main concerns with the CTA are things like strategic placement of the button and choosing an eye-catching color to draw attention to it.</p>
<p>On mobile, however, you have to think about size, too — and not just how much space it takes up on the screen. Remember the thumb zone and the various ways in which users hold their phone. Ensure that the button is wide enough so that any user can easily click on it without having to change their hand position.</p>
<p>So, your goal should be to design buttons that (1) sit at the bottom of the mobile checkout page and (2) stretch all the way from left to right, as is the case on <a href="https://www.staples.com/">Staples</a>’ mobile website:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG"
sizes="100vw"
alt="Staple’s big blue CTA button"
/>
<figcaption class="op-vertical-bottom">
Staple’s bright blue CTA sticks out in an otherwise plain checkout. (Image: <a href='https://www.staples.com/'>Staples</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e2fd27-a8d1-4ffc-9c26-3e69971f5366/staples-big-button.PNG'>View large version</a>)
</figcaption>
</figure>
<p>No matter who is making the purchase — a left-handed, a right-handed or a two-handed cradler — that button will be easy reach.</p>
<p>Of all the mobile checkout enhancements we’ve covered today, the CTA is the easiest one to address. Make it big, give it a distinctive color, place it at the very bottom of the mobile screen, and make it span the full width. In other words, don’t make customers work hard to take the final step in a purchase.</p>
<h4>10. Offer an Alternate Way Out</h4>
<p>Finally, give customers an alternate way out.</p>
<p>Let’s say they’re shopping on a mobile website, adding items to their cart, but something isn’t sitting right with them, and they don’t want to make the purchase. You’ve done everything you can to assure them along the way with a clean, easy and secure checkout experience, but they just aren’t confident in making a payment on their phone.</p>
<p>Rather than merely hoping you don’t lose the purchase entirely, give them a chance to save it for later. That way, if they really are interested in buying your product, they can revisit on desktop and pull the trigger. It’s not ideal, because you do want to keep them in place on mobile, but the option is good for customers who just can’t be saved.</p>
<p>As you can see on <a href="https://www.llbean.com/">L.L. Bean</a>’s mobile website, there is an option at checkout to “Move to Wish List”:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG"
sizes="100vw"
alt="L.L. Bean wish list option"
/>
<figcaption class="op-vertical-bottom">
L.L. Bean gives customers another chance to move items to their wish list during checkout. (Image: <a href='https://www.llbean.com/'>L.L. Bean</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ce45dd-ca6c-48b4-9d62-dc750804cf5c/llbean-wishlist.PNG'>View large version</a>)
</figcaption>
</figure>
<p>What’s nice about this is that L.L. Bean clearly doesn’t want browsing of the wish list or the removal of an item to be a primary action. If “Move to Wish List” were shown as a big bold CTA button, more customers might decide to take this seemingly safer alternative. As it’s designed now, it’s more of a, “Hey, we don’t want you to do anything you’re not comfortable with. This is here just in case.”</p>
<p>While fewer options are generally better in web design, this might be something to explore if your checkout has a high cart abandonment rate on mobile.</p>
<h3>Wrapping Up</h3>
<p>As more mobile visitors flock to your website, every step leading to conversion — including the checkout phase — needs to be optimized for convenience, speed and security. If your checkout is not adeptly designed to mobile users’ specific needs and expectations, you’re going to find that those conversion rates drop or shift back to desktop — and that’s not the direction you want things to go in, especially if Google is pushing us all towards a mobile-first world.</p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(da, ra, yk, al, il)</span>
</div>
<div id="sponsors-article-end" data-impression="true" class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Oleh Mryhlod</author>
<title>How To Create An Audio/Video Recording App With React Native: An In-Depth Tutorial</title>
<link>https://www.smashingmagazine.com/2018/04/audio-video-recording-react-native-expo/</link>
<pubDate>Thu, 19 Apr 2018 12:15:26 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/audio-video-recording-react-native-expo/</guid>
<description>React Native is a young technology, already gaining popularity among developers. It is a great option for smooth, fast, and efficient mobile app development. High-performance rates for mobile environments, code reuse, and a strong community: These are just some of the benefits React Native provides.
In this guide, I will share some insights about the high-level capabilities of React Native and the products you can develop with it in a short period of time.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/audio-video-recording-react-native-expo/" />
<title>How To Create An Audio/Video Recording App With React Native: An In-Depth Tutorial</title>
</head>
<body>
<article>
<header>
<h1>How To Create An Audio/Video Recording App With React Native: An In-Depth Tutorial</h1>
<address>Oleh Mryhlod</address>
<time datetime="2018-04-19T12:15:26+02:00" class="op-published">2018-04-19T12:15:26+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>React Native is a young technology, already gaining popularity among developers. It is a great option for smooth, fast, and efficient mobile app development. High-performance rates for mobile environments, code reuse, and a strong community: These are just some of the benefits React Native provides.</p>
<p>In this guide, I will share some insights about the high-level capabilities of React Native and the products you can develop with it in a short period of time.</p>
<p>We will delve into the step-by-step process of creating a video/audio recording app with React Native and <a href="https://expo.io/">Expo</a>. Expo is an open-source toolchain built around React Native for developing iOS and Android projects with React and JavaScript. It provides a bunch of native APIs maintained by native developers and the open-source community.</p>
<p>After reading this article, you should have all the necessary knowledge to create video/audio recording functionality with React Native.</p>
<p>Let's get right to it.</p>
<h3>Brief Description Of The Application</h3>
<p>The application you will learn to develop is called a multimedia notebook. I have implemented part of this functionality in an online job board application for the film industry. The main goal of this mobile app is to connect people who work in the film industry with employers. They can create a profile, add a video or audio introduction, and apply for jobs.</p>
<p>The application consists of three main screens that you can switch between with the help of a tab navigator:</p>
<ul>
<li>the audio recording screen,</li>
<li>the video recording screen,</li>
<li>a screen with a list of all recorded media and functionality to play back or delete them.</li>
</ul>
<p><em>Check out how this app works by <a href="https://expo.io/@apiko_dev/multimedia-notes">opening this link with Expo</a>.</em></p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Getting workflow <em>just</em> right ain't an easy task. So are proper estimates. Or alignment among different departments. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works well for them. A part of the <a href="https://www.smashingmagazine.com/membership/">Smashing Membership</a>, of course.</p>
<a href="https://www.smashingmagazine.com/membership/" class="btn btn--green btn--large">
Explore features →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/smashing-tv-box-cat.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>First, download Expo to your mobile phone. There are two options to open the project :</p>
<ol>
<li>Open the link in the browser, scan the QR code with your mobile phone, and wait for the project to load.</li>
<li>Open the link with your mobile phone and click on “Open project using Expo”.</li>
</ol>
<p>You can also open the app in the browser. Click on “Open project in the browser”. If you have a paid account on <a href="https://appetize.io/">Appetize.io</a>, visit it and enter the code in the field to open the project. If you don’t have an account, click on “Open project” and wait in an account-level queue to open the project.</p>
<p>However, I recommend that you download the Expo app and open this project on your mobile phone to check out all of the features of the video and audio recording app.</p>
<p><em>You can find the full code for the media recording app in the <a href="https://github.com/apiko-dev/Multimedia-Notes">repository</a> on GitHub.</em></p>
<h4>Dependencies Used For App Development</h4>
<p>As mentioned, the media recording app is developed with React Native and Expo.</p>
<p>You can see the full list of dependencies in the repository’s <code>package.json</code> file.</p>
<p>These are the main libraries used:</p>
<ul>
<li>React-navigation, for navigating the application,</li>
<li>Redux, for saving the application’s state,</li>
<li>React-redux, which are React bindings for Redux,</li>
<li>Recompose, for writing the components’ logic,</li>
<li>Reselect, for extracting the state fragments from Redux.</li>
</ul>
<p>Let's look at the project's structure:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png"
sizes="70vw"
alt=""
/>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8d47762c-3e33-4bdf-a2c2-d0c4d66ff6f6/project-s-structure.png'>Large preview</a>
</figcaption>
</figure>
<ul>
<li><code>src/index.js</code>: root app component imported in the <code>app.js</code> file;</li>
<li><code>src/components</code>: reusable components;</li>
<li><code>src/constants</code>: global constants;</li>
<li><code>src/styles</code>: global styles, colors, fonts sizes and dimensions.</li>
<li><code>src/utils</code>: useful utilities and recompose enhancers;</li>
<li><code>src/screens</code>: screens components;</li>
<li><code>src/store</code>: Redux store;</li>
<li><code>src/navigation</code>: application’s navigator;</li>
<li><code>src/modules</code>: Redux modules divided by entities as modules/audio, modules/video, modules/navigation.</li>
</ul>
<p>Let’s proceed to the practical part.</p>
<h3>Create Audio Recording Functionality With React Native</h3>
<p>First, it's important to сheck the <a href="https://docs.expo.io/versions/latest/sdk/audio.html">documentation for the Expo Audio API</a>, related to audio recording and playback. You can see all of the code in the <a href="https://github.com/apiko-dev/Multimedia-Notes">repository</a>. I recommend opening the code as you read this article to better understand the process.</p>
<p>When launching the application for the first time, you’ll need the user's permission for audio recording, which entails access to the microphone. Let's use <code>Expo.AppLoading</code> and ask permission for recording by using <code>Expo.Permissions</code> (see the <code>src/index.js</code>) during <code>startAsync</code>.</p>
<p><strong>Await</strong> <code>Permissions.askAsync(Permissions.AUDIO_RECORDING);</code></p>
<p>Audio recordings are displayed on a seperate screen whose UI changes depending on the state.</p>
<p>First, you can see the button “Start recording”. After it is clicked, the audio recording begins, and you will find the current audio duration on the screen. After stopping the recording, you will have to type the recording’s name and save the audio to the <strong>Redux store</strong>.</p>
<p>My audio recording UI looks like this:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png"
sizes="100vw"
alt=""
/>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2d729edd-0fd1-40f5-bc89-3613b916eac1/audio-recording-ui.png'>Large preview</a>
</figcaption>
</figure>
<p>I can save the audio in the <strong>Redux store</strong> in the following format:</p>
<pre><code class="language-javascript">audioItemsIds: [‘id1’, ‘id2’],
audioItems: {
‘id1’: {
id: string,
title: string,
recordDate: date string,
duration: number,
audioUrl: string,
}
},</code></pre>
<p>Let’s write the audio logic by using Recompose in the screen’s container <code>src/screens/RecordAudioScreenContainer</code>.</p>
<p>Before you start recording, customize the audio mode with the help of <code>Expo.Audio.set.AudioModeAsync</code> (mode), where mode is the dictionary with the following <strong>key-value pairs</strong>:</p>
<ul>
<li><code>playsInSilentModeIOS</code>: A boolean selecting whether your experience’s audio should play in silent mode on iOS. This value defaults to false.</li>
<li><code>allowsRecordingIOS</code>: A boolean selecting whether recording is enabled on iOS. This value defaults to false. Note: When this flag is set to true, playback may be routed to the phone receiver, instead of to the speaker.</li>
<li><code>interruptionModeIOS</code>: An enum selecting how your experience’s audio should interact with the audio from other apps on iOS.</li>
<li><code>shouldDuckAndroid</code>: A boolean selecting whether your experience’s audio should automatically be lowered in volume (“duck”) if audio from another app interrupts your experience. This value defaults to true. If false, audio from other apps will pause your audio.</li>
<li><code>interruptionModeAndroid</code>: An enum selecting how your experience’s audio should interact with the audio from other apps on Android.</li>
</ul>
<p><strong>Note</strong>: <em>You can learn more about the customization of <strong>AudioMode</strong> in <a href="https://docs.expo.io/versions/latest/sdk/audio.html#expoaudiosetaudiomodeasyncmode">the documentation</a>.</em></p>
<p>I have used the following values in this app:</p>
<p><code>interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX</code>, — Our record interrupts audio from other apps on IOS.</p>
<p><code>playsInSilentModeIOS</code>: <strong>true</strong>,</p>
<p><code>shouldDuckAndroid</code>: <strong>true</strong>,</p>
<p><code>interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX</code> — Our record interrupts audio from other apps on Android.</p>
<p><code>allowsRecordingIOS</code> Will change to true before the audio recording and to false after its completion.</p>
<p>To implement this, let's write the handler <code>setAudioMode</code> with <strong>Recompose</strong>.</p>
<pre class="break-out"><code class="language-javascript">withHandlers({
setAudioMode: () => async ({ allowsRecordingIOS }) => {
try {
await Audio.setAudioModeAsync({
allowsRecordingIOS,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
});
} catch (error) {
console.log(error) // eslint-disable-line
}
},
}),</code></pre>
<p>To record the audio, you’ll need to create an instance of the <code>Expo.Audio.Recording class</code>.</p>
<pre><code class="language-javascript">const recording = new Audio.Recording();</code></pre>
<p>After creating the recording instance, you will be able to receive the <strong>status of the Recording</strong> with the help of <code>recordingInstance.getStatusAsync()</code>.</p>
<p>The status of the recording is a dictionary with the following key-value pairs:</p>
<ul>
<li><code>canRecord:</code> a boolean.</li>
<li><code>isRecording:</code> a boolean describing whether the recording is currently recording.</li>
<li><code>isDoneRecording:</code> a boolean.</li>
<li><code>durationMillis:</code> current duration of the recorded audio.</li>
</ul>
<p>You can also set a function to be called at regular intervals with <code>recordingInstance.setOnRecordingStatusUpdate(onRecordingStatusUpdate).</code></p>
<p>To update the UI, you will need to call <code>setOnRecordingStatusUpdate</code> and set your own callback.</p>
<p>Let’s add some props and a recording callback to the container.</p>
<pre class="break-out"><code class="language-javascript">withStateHandlers({
recording: null,
isRecording: false,
durationMillis: 0,
isDoneRecording: false,
fileUrl: null,
audioName: '',
}, {
setState: () => obj => obj,
setAudioName: () => audioName => ({ audioName }),
recordingCallback: () => ({ durationMillis, isRecording, isDoneRecording }) =>
({ durationMillis, isRecording, isDoneRecording }),
}),</code></pre>
<p>The callback setting for <code>setOnRecordingStatusUpdate</code> is:</p>
<p><code>recording.setOnRecordingStatusUpdate(props.recordingCallback);</code></p>
<p><code>onRecordingStatusUpdate</code> is called every 500 milliseconds by default. To make the UI update valid, set the 200 milliseconds interval with the help of <code>setProgressUpdateInterval</code>:</p>
<p><code>recording.setProgressUpdateInterval(200);</code></p>
<p>After creating an instance of this class, call <code>prepareToRecordAsync</code> to record the audio.</p>
<p><code>recordingInstance.prepareToRecordAsync(options)</code> loads the recorder into memory and prepares it for recording. It must be called before calling <code>startAsync()</code>. This method can be used if the <strong>recording instance</strong> has never been prepared.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>The parameters of this method include such options for the recording as sample rate, bitrate, channels, format, encoder and extension. You can find a list of all recording options in this <a href="https://docs.expo.io/versions/latest/sdk/audio.html#recordingoptions">document</a>.</p>
<p>In this case, let’s use <code>Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY</code>.</p>
<p>After the recording has been prepared, you can start recording by calling the method <code>recordingInstance.startAsync()</code>.</p>
<p>Before creating a new <strong>recording instance</strong>, check whether it has been created before. <strong>The handler</strong> for beginning the recording looks like this:</p>
<pre class="break-out"><code class="language-javascript">onStartRecording: props => async () => {
try {
if (props.recording) {
props.recording.setOnRecordingStatusUpdate(null);
props.setState({ recording: null });
}
await props.setAudioMode({ allowsRecordingIOS: true });
const recording = new Audio.Recording();
recording.setOnRecordingStatusUpdate(props.recordingCallback);
recording.setProgressUpdateInterval(200);
props.setState({ fileUrl: null });
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
props.setState({ recording });
} catch (error) {
console.log(error) // eslint-disable-line
}
},</code></pre>
<p>Now you need to write a <strong>handler</strong> for the audio recording completion. After clicking the stop button, you have to stop the recording, disable it on iOS, receive and save the local URL of the recording, and set <code>OnRecordingStatusUpdate</code> and the <strong>recording instance to null</strong>:</p>
<pre class="break-out"><code class="language-javascript">onEndRecording: props => async () => {
try {
await props.recording.stopAndUnloadAsync();
await props.setAudioMode({ allowsRecordingIOS: false });
} catch (error) {
console.log(error); // eslint-disable-line
}
if (props.recording) {
const fileUrl = props.recording.getURI();
props.recording.setOnRecordingStatusUpdate(null);
props.setState({ recording: null, fileUrl });
}
},</code></pre>
<p>After this, type the audio name, click the <strong>“continue”</strong> button, and the audio note will be saved in the <strong>Redux store</strong>.</p>
<pre><code class="language-javascript">onSubmit: props => () => {
if (props.audioName && props.fileUrl) {
const audioItem = {
id: uuid(),
recordDate: moment().format(),
title: props.audioName,
audioUrl: props.fileUrl,
duration: props.durationMillis,
};
props.addAudio(audioItem);
props.setState({
audioName: '',
isDoneRecording: false,
});
props.navigation.navigate(screens.LibraryTab);
}
},</code></pre>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1be2e40f-3e37-48f0-9047-5fe0483f5c6e/recordaudio.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1be2e40f-3e37-48f0-9047-5fe0483f5c6e/recordaudio.gif" width="384" height="680" alt="" /></a><figcaption>(<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1be2e40f-3e37-48f0-9047-5fe0483f5c6e/recordaudio.gif">Large preview</a>)</figcaption></figure>
<h3>Audio Playback With React Native</h3>
<p>You can play the audio on the screen with the saved audio notes. To start the audio playback, click one of the items on the list. Below, you can see the audio player that allows you to track the current position of playback, to set the playback starting point and to toggle the playing audio.</p>
<p>Here’s what my audio playback UI looks like:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png"
sizes="100vw"
alt=""
/>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5dbf7c5-3b4b-463e-8bc5-37f842df6534/audio-playback-ui.png'>Large preview</a>
</figcaption>
</figure>
<p><a href="https://docs.expo.io/versions/latest/sdk/av.html">The Expo.Audio.Sound objects and Expo.Video components</a> share a unified imperative API for media playback.</p>
<p>Let's write the logic of the audio playback by using Recompose in the screen container <code>src/screens/LibraryScreen/LibraryScreenContainer</code>, as the audio player is available only on this screen.</p>
<p>If you want to display the player at any point of the application, I recommend writing the logic of the player and audio playback in <strong>Redux operations</strong> using <strong>redux-thunk</strong>.</p>
<p>Let's customize the audio mode in the same way we did for the audio recording. First, set <code>allowsRecordingIOS</code> to <strong>false</strong>.</p>
<pre class="break-out"><code class="language-javascript">lifecycle({
async componentDidMount() {
await Audio.setAudioModeAsync({
allowsRecordingIOS: false,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
});
},
}),</code></pre>
<p>We have created the <strong>recording instance</strong> for audio recording. As for audio playback, we need to create the <strong>sound instance</strong>. We can do it in two different ways:</p>
<ol>
<li><code>const playbackObject = new Expo.Audio.Sound();</code></li>
<li><code>Expo.Audio.Sound.create(source, initialStatus = {}, onPlaybackStatusUpdate = null, downloadFirst = true)</code></li>
</ol>
<p>If you use the first method, you will need to call <code>playbackObject.loadAsync()</code>, which loads the media from source into memory and prepares it for playing, after creation of the instance.</p>
<p>The second method is a static convenience method to construct and load a sound. It сreates and loads a sound from source with the optional <code>initialStatus</code>, <code>onPlaybackStatusUpdate</code> and <code>downloadFirst</code> parameters.</p>
<p>The source parameter is the source of the sound. It supports the following forms:</p>
<ul>
<li>a dictionary of the form <code>{ uri: 'http://path/to/file' }</code> with a network URL pointing to an audio file on the web;</li>
<li><code>require('path/to/file')</code> for an audio file asset in the source code directory;</li>
<li>an <a href="https://docs.expo.io/versions/latest/sdk/asset.html">Expo.Asset</a> object for an audio file asset.</li>
</ul>
<p><code>The initialStatus</code> parameter is the initial playback status. <code>PlaybackStatus</code> is the structure returned from all playback API calls describing the state of the <code>playbackObject</code> at that point of time. It is a dictionary with the key-value pairs. You can check all of the keys of the <code>PlaybackStatus</code> in the <a href="https://docs.expo.io/versions/latest/sdk/av.html#playback-status">documentation</a>.</p>
<p><code>onPlaybackStatusUpdate</code> is a function taking a single parameter, <code>PlaybackStatus</code>. It is called at regular intervals while the media is in the loaded state. The interval is 500 milliseconds by default. In my application, I set it to 50 milliseconds interval for a proper UI update.</p>
<p>Before creating the sound instance, you will need to implement the <code>onPlaybackStatusUpdate callback</code>. First, add some props to the screen container:</p>
<pre><code class="language-javascript">withClassVariableHandlers({
playbackInstance: null,
isSeeking: false,
shouldPlayAtEndOfSeek: false,
playingAudio: null,
}, 'setClassVariable'),
withStateHandlers({
position: null,
duration: null,
shouldPlay: false,
isLoading: true,
isPlaying: false,
isBuffering: false,
showPlayer: false,
}, {
setState: () => obj => obj,
}),</code></pre>
<p>Now, implement <code>onPlaybackStatusUpdate</code>. You will need to make several validations based on <code>PlaybackStatus</code> for a proper UI display:</p>
<pre class="break-out"><code class="language-javascript">withHandlers({
soundCallback: props => (status) => {
if (status.didJustFinish) {
props.playbackInstance().stopAsync();
} else if (status.isLoaded) {
const position = props.isSeeking()
? props.position
: status.positionMillis;
const isPlaying = (props.isSeeking() || status.isBuffering)
? props.isPlaying
: status.isPlaying;
props.setState({
position,
duration: status.durationMillis,
shouldPlay: status.shouldPlay,
isPlaying,
isBuffering: status.isBuffering,
});
}
},
}),</code></pre>
<p>After this, you have to implement a handler for the audio playback. If a sound instance is already created, you need to unload the media from memory by calling <code>playbackInstance.unloadAsync()</code> and clear <code>OnPlaybackStatusUpdate</code>:</p>
<pre class="break-out"><code class="language-javascript">loadPlaybackInstance: props => async (shouldPlay) => {
props.setState({ isLoading: true });
if (props.playbackInstance() !== null) {
await props.playbackInstance().unloadAsync();
props.playbackInstance().setOnPlaybackStatusUpdate(null);
props.setClassVariable({ playbackInstance: null });
}
const { sound } = await Audio.Sound.create(
{ uri: props.playingAudio().audioUrl },
{ shouldPlay, position: 0, duration: 1, progressUpdateIntervalMillis: 50 },
props.soundCallback,
);
props.setClassVariable({ playbackInstance: sound });
props.setState({ isLoading: false });
},</code></pre>
<p>Call the handler <code>loadPlaybackInstance(true)</code> by clicking the item in the list. It will automatically load and play the audio.</p>
<p>Let's add the pause and play functionality (toggle playing) to the audio player. If audio is already playing, you can pause it with the help of <code>playbackInstance.pauseAsync()</code>. If audio is paused, you can resume playback from the paused point with the help of the <code>playbackInstance.playAsync()</code> method:</p>
<pre><code class="language-javascript">onTogglePlaying: props => () => {
if (props.playbackInstance() !== null) {
if (props.isPlaying) {
props.playbackInstance().pauseAsync();
} else {
props.playbackInstance().playAsync();
}
}
},</code></pre>
<p>When you click on the playing item, it should stop. If you want to stop audio playback and put it into the 0 playing position, you can use the method <code>playbackInstance.stopAsync()</code>:</p>
<pre><code class="language-javascript">onStop: props => () => {
if (props.playbackInstance() !== null) {
props.playbackInstance().stopAsync();
props.setShowPlayer(false);
props.setClassVariable({ playingAudio: null });
}
},</code></pre>
<p>The audio player also allows you to rewind the audio with the help of the slider. When you start sliding, the audio playback should be paused with <code>playbackInstance.pauseAsync()</code>.</p>
<p>After the sliding is complete, you can set the audio playing position with the help of <code>playbackInstance.setPositionAsync(value)</code>, or play back the audio from the set position with <code>playbackInstance.playFromPositionAsync(value)</code>:</p>
<pre class="break-out"><code class="language-javascript">onCompleteSliding: props => async (value) => {
if (props.playbackInstance() !== null) {
if (props.shouldPlayAtEndOfSeek) {
await props.playbackInstance().playFromPositionAsync(value);
} else {
await props.playbackInstance().setPositionAsync(value);
}
props.setClassVariable({ isSeeking: false });
}
},</code></pre>
<p>After this, you can pass the props to the components <code>MediaList</code> and <code>AudioPlayer</code> (see the file <code>src/screens/LibraryScreen/LibraryScreenView</code>).</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c639efb-c541-4213-bc37-fddfae15d831/playbackaudio.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6c639efb-c541-4213-bc37-fddfae15d831/playbackaudio.gif" width="384" height="680" alt="" /></a></figure>
<h3>Video Recording Functionality With React Native</h3>
<p>Let's proceed to video recording.</p>
<p>We’ll use <code>Expo.Camera</code> for this purpose. <code>Expo.Camera</code> is a React component that renders a preview of the device’s front or back camera. <code>Expo.Camera</code> can also take photos and record videos that are saved to the app’s cache.</p>
<p>To record video, you need permission for access to the camera and microphone. Let's add the request for camera access as we did with the audio recording (in the file <code>src/index.js</code>):</p>
<pre><code class="language-javascript">await Permissions.askAsync(Permissions.CAMERA);</code></pre>
<p>Video recording is available on the “Video Recording” screen. After switching to this screen, the camera will turn on.</p>
<p>You can change the camera type (front or back) and start video recording. During recording, you can see its general duration and can cancel or stop it. When recording is finished, you will have to type the name of the video, after which it will be saved in the <strong>Redux store</strong>.</p>
<p>Here is what my video recording UI looks like:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png"
sizes="100vw"
alt=""
/>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3bceb69-985d-4765-bf48-e32b347e510e/video-recording-ui.png'>Large preview</a>
</figcaption>
</figure>
<p>Let’s write the video recording logic by using Recompose on the container screen
<code>src/screens/RecordVideoScreen/RecordVideoScreenContainer</code>.</p>
<p>You can see the full list of all props in the <code>Expo.Camera</code> component in <a href="https://docs.expo.io/versions/latest/sdk/camera.html#props">the document</a>.</p>
<p>In this application, we will use the following props for <code>Expo.Camera</code>.</p>
<ul>
<li><code>type</code>: The camera type is set (front or back).</li>
<li><code>onCameraReady</code>: This callback is invoked when the camera preview is set. You won't be able to start recording if the camera is not ready.</li>
<li><code>style</code>: This sets the styles for the camera container. In this case, the size is 4:3.</li>
<li><code>ref</code>: This is used for direct access to the camera component.</li>
</ul>
<p>Let's add the variable for saving the type and handler for its changing.</p>
<pre><code class="language-javascript">cameraType: Camera.Constants.Type.back,
toggleCameraType: state => () => ({
cameraType: state.cameraType === Camera.Constants.Type.front
? Camera.Constants.Type.back
: Camera.Constants.Type.front,
}),</code></pre>
<p>Let's add the variable for saving the camera ready state and callback for <code>onCameraReady</code>.</p>
<pre><code class="language-javascript">isCameraReady: false,
setCameraReady: () => () => ({ isCameraReady: true }),</code></pre>
<p>Let's add the variable for saving the camera component reference and setter.</p>
<pre><code class="language-javascript">cameraRef: null,
setCameraRef: () => cameraRef => ({ cameraRef }),</code></pre>
<p>Let's pass these variables and handlers to the camera component.</p>
<pre><code class="language-javascript"><Camera
type={cameraType}
onCameraReady={setCameraReady}
style={s.camera}
ref={setCameraRef}
/></code></pre>
<p>Now, when calling <code>toggleCameraType</code> after clicking the button, the camera will switch from the front to the back.</p>
<p>Currently, we have access to the camera component via the reference, and we can start video recording with the help of <code>cameraRef.recordAsync()</code>.</p>
<p>The method <code>recordAsync</code> starts recording a video to be saved to the cache directory.</p>
<h5>Arguments:</h5>
<p>Options (object) — a map of options:</p>
<ul>
<li><code>quality</code> (VideoQuality): Specify the quality of recorded video. Usage: Camera.Constants.VideoQuality['<value>'], possible values: for 16:9 resolution 2160p, 1080p, 720p, 480p (Android only) and for 4:3 (the size is 640x480). If the chosen quality is not available for the device, choose the highest one.</li>
<li><code>maxDuration</code> (number): Maximum video duration in seconds.</li>
<li><code>maxFileSize</code> (number): Maximum video file size in bytes.</li>
<li><code>mute</code> (boolean): If present, video will be recorded with no sound.</li>
</ul>
<p><code>recordAsync</code> returns a promise that resolves to an object containing the video file’s URI property. You will need to save the file’s URI in order to play back the video hereafter. The promise is returned if <code>stopRecording</code> was invoked, one of <code>maxDuration</code> and <code>maxFileSize</code> is reached or the camera preview is stopped.</p>
<p>Because the ratio set for the camera component sides is 4:3, let's set the same format for the video quality.</p>
<p>Here is what the handler for starting video recording looks like (see the full code of the container in the repository):</p>
<pre class="break-out"><code class="language-javascript">onStartRecording: props => async () => {
if (props.isCameraReady) {
props.setState({ isRecording: true, fileUrl: null });
props.setVideoDuration();
props.cameraRef.recordAsync({ quality: '4:3' })
.then((file) => {
props.setState({ fileUrl: file.uri });
});
}
},</code></pre>
<p>During the video recording, we can’t receive the recording status as we have done for audio. That's why I have created a function to set video duration.</p>
<p>To stop the video recording, we have to call the following function:</p>
<pre><code class="language-javascript">stopRecording: props => () => {
if (props.isRecording) {
props.cameraRef.stopRecording();
props.setState({ isRecording: false });
clearInterval(props.interval);
}
},</code></pre>
<p>Check out the entire process of video recording.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/156ff42c-4a55-4510-b02f-e62302e7fb9e/recordvideo.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/156ff42c-4a55-4510-b02f-e62302e7fb9e/recordvideo.gif" width="320" height="584" alt="" /></a></figure>
<h3>Video Playback Functionality With React Native</h3>
<p>You can play back the video on the “Library” screen. Video notes are located in the “Video” tab.</p>
<p>To start the video playback, click the selected item in the list. Then, switch to the playback screen, where you can watch or delete the video.</p>
<p>The UI for video playback looks like this:</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png"
sizes="100vw"
alt=""
/>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/52f5acaf-2a76-4cae-bea1-17cb3a3b090a/video-playback-ui.png'>Large preview</a>
</figcaption>
</figure>
<p>To play back the video, use <code>Expo.Video</code>, a component that displays a video inline with the other React Native UI elements in your app.</p>
<p>The video will be displayed on the separate screen, PlayVideo.</p>
<p>You can check out all of the <a href="https://docs.expo.io/versions/latest/sdk/video.html#props">props for Expo.Video here</a>.</p>
<p>In our application, the <code>Expo.Video</code> <strong>component</strong> uses native playback controls and looks like this:</p>
<pre><code class="language-javascript"><Video
source={{ uri: videoUrl }}
style={s.video}
shouldPlay={isPlaying}
resizeMode="contain"
useNativeControls={isPlaying}
onLoad={onLoad}
onError={onError}
/></code></pre>
<ul>
<li><code>source</code><br />
This is the source of the video data to display. The same forms as for Expo.Audio.Sound are supported.</li>
<li><code>resizeMode</code><br />
This is a string describing how the video should be scaled for display in the component view’s bounds. It can be “stretch”, “contain” or “cover”.</li>
<li><code>shouldPlay</code><br />
This boolean describes whether the media is supposed to play.</li>
<li><code>useNativeControls</code><br />
This boolean, if set to true, displays native playback controls (such as play and pause) within the video component.</li>
<li><code>onLoad</code><br />
This function is called once the video has been loaded.</li>
<li><code>onError</code><br />
This function is called if loading or playback has encountered a fatal error. The function passes a single error message string as a parameter.</li>
</ul>
<p>When the video is uploaded, the play button should be rendered on top of it.</p>
<p>When you click the play button, the video turns on and the native playback controls are displayed.</p>
<p>Let’s write the logic of the video using Recompose in the screen container <code>src/screens/PlayVideoScreen/PlayVideoScreenContainer</code>:</p>
<pre class="break-out"><code class="language-javascript">const defaultState = {
isError: false,
isLoading: false,
isPlaying: false,
};
const enhance = compose(
paramsToProps('videoUrl'),
withStateHandlers({
...defaultState,
isLoading: true,
}, {
onError: () => () => ({ ...defaultState, isError: true }),
onLoad: () => () => defaultState,
onTogglePlaying: ({ isPlaying }) => () => ({ ...defaultState, isPlaying: !isPlaying }),
}),
);</code></pre>
<p>As previously mentioned, the <code>Expo.Audio.Sound</code> objects and <code>Expo.Video</code> components share a unified imperative API for media playback. That's why you can create custom controls and use more advanced functionality with the Playback API.</p>
<p>Check out the video playback process:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d293d27c-b85f-446a-a3da-4bd7d74de879/playbackvideo.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d293d27c-b85f-446a-a3da-4bd7d74de879/playbackvideo.gif" width="320" height="568" alt="" /></a></figure>
<p>See the full code for the application in the <a href="https://github.com/apiko-dev/Multimedia-Notes">repository</a>.</p>
<p>You can also install the app on your phone by using <a href="https://expo.io/@apiko_dev/multimedia-notes">Expo</a> and check out how it works in practice.</p>
<h3>Wrapping Up</h3>
<p>I hope you have enjoyed this article and have enriched your knowledge of React Native. You can use this audio and video recording tutorial to create your own custom-designed media player. You can also scale the functionality and add the ability to save media in the phone’s memory or on a server, synchronize media data between different devices, and share media with others.</p>
<p>As you can see, there is a wide scope for imagination. If you have any questions about the process of developing an audio or video recording app with React Native, feel free to drop a comment below.</p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(da, lf, ra, yk, al, il)</span>
</div>
<div id="sponsors-article-end" data-impression="true" class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Ricky Onsman</author>
<title>Which Podcasts Should Web Designers And Developers Be Listening To?</title>
<link>https://www.smashingmagazine.com/2018/04/podcasts-web-designers-developers/</link>
<pubDate>Wed, 18 Apr 2018 13:45:00 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/podcasts-web-designers-developers/</guid>
<description>We asked the Smashing community what podcasts they listened to, aiming to compile a shortlist of current podcasts for web designers and developers. We had what can only be called a very strong response &mdash; both in number and in passion.
First, we winnowed out the podcasts that were on a broader theme (e.g. creativity, mentoring, leadership), on a narrower theme (e.g. on one specific WordPress theme) or on a completely different theme (e.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/podcasts-web-designers-developers/" />
<title>Which Podcasts Should Web Designers And Developers Be Listening To?</title>
</head>
<body>
<article>
<header>
<h1>Which Podcasts Should Web Designers And Developers Be Listening To?</h1>
<address>Ricky Onsman</address>
<time datetime="2018-04-18T13:45:00+02:00" class="op-published">2018-04-18T13:45:00+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>We asked the Smashing community what podcasts they listened to, aiming to compile a shortlist of current podcasts for web designers and developers. We had what can only be called a very strong response — both in number and in passion.</p>
<p>First, we winnowed out the podcasts that were on a broader theme (e.g. creativity, mentoring, leadership), on a narrower theme (e.g. on one specific WordPress theme) or on a completely different theme (e.g. car maintenance — I’m sure it was well-intentioned).</p>
<p>When we filtered out those that had produced no new content in the last three months or more (although then we did have to make some exceptions, as you’ll see), and ordered the rest according to how many times they were nominated, we had a graded shortlist of 55.</p>
<p>Agreed, that’s not a very short shortlist.</p>
<p>So, we broke it down into five more reasonably sized shortlists:</p>
<ul>
<li><a href="#podcasts-for-web-developers">Podcasts for web developers</a></li>
<li><a href="#podcasts-for-web-designers">Podcasts for web designers</a></li>
<li><a href="#podcasts-web-internet-technology">Podcasts on the web, the Internet and technology</a></li>
<li><a href="#business-podcasts-for-web-professionals">Business podcasts for web professionals</a></li>
<li><a href="#other-podcasts">Podcasts that don’t have recent episodes (but do have great archives)</a></li>
</ul>
<p>Obviously, it’s highly unlikely anyone could — or would want to — listen to every episode of every one of these podcasts. Still, we’re pretty sure that any web designer or developer will find a few podcasts in this lot that will suit their particular listening tastes.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Getting workflow <em>just</em> right ain't an easy task. So are proper estimates. Or alignment among different departments. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works well for them. A part of the <a href="https://www.smashingmagazine.com/membership/">Smashing Membership</a>, of course.</p>
<a href="https://www.smashingmagazine.com/membership/" class="btn btn--green btn--large">
Explore features →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/smashing-tv-box-cat.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>A couple of caveats before we begin:</p>
<ul>
<li>We don’t claim to be comprehensive. These lists are drawn from suggestions from readers (not all of which were included) plus our own recommendations.</li>
<li>The descriptions are drawn from reader comments, summaries provided by the podcast provider and our own comments. Podcast running times and frequency are, by and large, approximate. The reality is podcasts tend to vary in length, and rarely stick to their stated schedule.</li>
<li>We’ve listed each podcast once only, even though several could qualify for more than one list.</li>
<li>We’ve excluded most videocasts. This is just for listening (videos probably deserve their own article).</li>
</ul>
<h3 id="podcasts-for-web-developers">Podcasts For Web Developers</h3>
<h4><a href="https://syntax.fm/">Syntax</a></h4>
<p><a href="https://syntax.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44cc5791-03d3-49fa-ac38-5e5d59c82437/logo-syntax.png" width="180" height="180" alt="Syntax" /></a><a href="https://twitter.com/wesbos">Wes Bos</a> and <a href="https://twitter.com/stolinski">Scott Tolinski</a> dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling. 30-70 minutes. Weekly.</p>
<h4><a href="https://spec.fm/podcasts/developer-tea">Developer Tea</a></h4>
<p><a href="https://spec.fm/podcasts/developer-tea"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4e6c35dc-9349-47ae-b919-766eba3ab9ce/logo-developertea.png" width="180" height="180" alt="Developer Tea" /></a>A podcast for developers designed to fit inside your tea break, a highly-concentrated, short, frequent podcast specifically for developers who like to learn on their tea (and coffee) break. The Spec Network also produces <a href="https://spec.fm/podcasts/design-details">Design Details</a>. 10-30 minutes. Every two days.</p>
<h4><a href="https://thewebplatformpodcast.com/">Web Platform Podcast</a></h4>
<p><a href="https://thewebplatformpodcast.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/940f968c-e2fe-4c38-b895-fb652f8edef4/logo-webplatform.png" width="180" height="180" alt="Web Platform Podcast" /></a>Covers the latest in browser features, standards, and the tools developers use to build for the web of today and beyond. Founded in 2014 by <a href="https://twitter.com/eisaksen">Erik Isaksen</a>. Hosts <a href="https://twitter.com/dee_bloo">Danny</a>, <a href="https://twitter.com/nomadtechie">Amal</a>, <a href="https://twitter.com/revillweb">Leon</a>, and <a href="https://twitter.com/justinribeiro">Justin</a> are joined by a special guest to discuss the latest developments. 60 minutes. Weekly.</p>
<h4><a href="https://devchat.tv/">Devchat Podcasts</a></h4>
<p><a href="https://devchat.tv/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61c60db7-eb63-403a-b525-8ef57506f544/logo-devchat.png" width="180" height="180" alt="Devchat Podcasts" /></a>Fourteen podcasts with a range of hosts that each explore developments in a specific aspect of development or programming including Ruby, iOS, Angular, JavaScript, React, Rails, security, conference talks, and freelancing. 30-60 minutes. Weekly.</p>
<h4><a href="https://player.fm/series/series-1401614">The Bike Shed</a></h4>
<p><a href="https://player.fm/series/series-1401614"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0368a287-377b-4cf9-b926-88223ee78eaa/logo-bikeshed.png" width="180" height="180" alt="The Bike Shed" /></a>Hosts <a href="https://twitter.com/derekprior">Derek Prior</a>, <a href="https://twitter.com/sgrif">Sean Griffin</a>, <a href="https://twitter.com/mandybess">Amanda Hill</a> and guests discuss their development experience and challenges with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire at any particular moment. 30-45 minutes. Weekly.</p>
<h4><a href="http://nodeup.com/">NodeUp</a></h4>
<p><a href="http://nodeup.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91723437-a211-4933-a1ff-c8b3fe647059/logo-nodejs.png" width="180" height="180" alt="NodeUp" /></a>Hosted by Rod Vagg and a series of occasional co-hosts, this podcast features lengthy discussions with guests and panels about Node.js and Node-related topics. 30-90 minutes. Weekly / Monthly.</p>
<h4><a href="https://www.dotnetrocks.com/">.NET Rocks</a></h4>
<p><a href="https://www.dotnetrocks.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbedccc8-35e8-4432-bec0-ef1fd619514b/logo-netrocks.png" width="180" height="180" alt=".NET Rocks" /></a><a href="twitter.com/#!/carlfranklin">Carl Franklin</a> and <a href="twitter.com/#!/richcampbell">Richard Campbell</a> host an internet audio talk show for anyone interested in programming on the Microsoft .NET platform, including basic information, tutorials, product developments, guests, tips and tricks. 60 minutes. Twice a week.</p>
<h4><a href="http://threedevsandamaybe.com/">Three Devs and a Maybe</a></h4>
<p><a href="http://threedevsandamaybe.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/275c42f5-c4de-4ce7-9f5d-d6a171a5b73d/logo-threedevs.png" width="180" height="180" alt="Three Devs and a Maybe" /></a>Join <a href="https://twitter.com/michaelbud6">Michael Budd</a>, <a href="https://twitter.com/FraserHartDev">Fraser Hart</a>, <a href="https://twitter.com/LCainsWebDev">Lewis Cains</a>, and <a href="https://twitter.com/edd_mann">Edd Mann</a> as they discuss software development, frequently joined by a guest on the show’s topic, ranging from daily developer life, PHP, frameworks, testing, good software design and programming languages. 45-60 minutes. Weekly.</p>
<h4><a href="http://www.weeklydevtips.com/">Weekly Dev Tips</a></h4>
<p><a href="http://www.weeklydevtips.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9db7057e-0b63-47b3-8ecc-320de8390e35/logo-weeklydevtips.png" width="180" height="180" alt="Weekly Dev Tips" /></a>Hosted by experienced software architect, trainer, and entrepreneur <a href="https://twitter.com/ardalis">Steve Smith</a>, Weekly Dev Tips offers a variety of technical and career tips for software developers. Each tip is quick and to the point, describing a problem and one or more ways to solve that problem. 5-10 minutes. Weekly.</p>
<h4><a href="https://devmode.fm/">devMode.fm</a></h4>
<p><a href="https://devmode.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3cbefe4e-043d-4501-b8cf-7c0057fe5645/logo-devmode.png" width="180" height="180" alt="devMode.fm" /></a>Dedicated to the tools, techniques, and technologies used in modern web development. Each episode, <a href="https://twitter.com/nystudio107">Andrew Welch</a> and <a href="https://twitter.com/p_harrington83">Patrick Harrington</a> lead a cadre of hosts discussing the latest hotness, pet peeves, and the frontend development technologies we use. 60-90 minutes. Twice a week.</p>
<h4><a href="https://www.codenewbie.org/podcast">CodeNewbie</a></h4>
<p><a href="https://www.codenewbie.org/podcast"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/87e43ccb-ec82-4a69-b466-7fb1ebc6e346/logo-codenewbie.png" width="180" height="180" alt="CodeNewbie" /></a>Stories from people on their coding journey. New episodes published every Monday. The most supportive community of programmers and people learning to code. Founded by <a href="https://twitter.com/saronyitbarek">Saron Yitbarek</a>. 30-60 minutes. Weekly.</p>
<h4><a href="http://frontendhappyhour.com/">Front End Happy Hour</a></h4>
<p><a href="http://frontendhappyhour.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fddd5bee-5ae0-44f0-b279-ff180a4bd503/logo-frontendhappy.png" width="180" height="180" alt="Front End Happy Hour" /></a>A podcast featuring panels of engineers from <a href="https://twitter.com/netflix">@Netflix</a>, <a href="https://twitter.com/evernote">@Evernote</a>, <a href="https://twitter.com/Atlassian">@Atlassian</a> and <a href="https://twitter.com/LinkedIn">@LinkedIn</a> talking over drinks about all things Front End development. 45-60 minutes. Every two weeks.</p>
<h4><a href="https://www.relay.fm/radar">Under the Radar</a></h4>
<p><a href="https://www.relay.fm/radar"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e18fd0a1-d7a6-4463-9142-45a0debf0eb5/logo-undertheradar.png" width="180" height="180" alt="Under the Radar" /></a>From development and design to marketing and support, Under the Radar is all about independent app development. Hosted by <a href="https://twitter.com/_davidsmith">David Smith</a> and <a href="https://twitter.com/marcoarment">Marco Arment</a>. 30 minutes. Weekly.</p>
<h4><a href="https://www.hanselminutes.com/">Hanselminutes</a></h4>
<p><a href="https://www.hanselminutes.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37bd31d-29f5-434e-8c3c-ca543ffbd837/logo-hanselminutes.png" width="180" height="180" alt="Hanselminutes" /></a><a href="https://twitter.com/shanselman">Scott Hanselman</a> interviews movers and shakers in technology in this commute-time show. From Michio Kaku to Paul Lutus, Ward Cunningham to Kimberly Bryant, Hanselminutes is talk radio guaranteed not to waste your time. 30 minutes. Weekly.</p>
<h4><a href="http://fixate.it/podcast/">Fixate on Code</a></h4>
<p><a href="http://fixate.it/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a211ad48-40ba-4ef9-9653-cd62c5e2dd15/logo-fixateoncode.png" width="180" height="180" alt="Fixate on Code" /></a>Since October 2017, <a href="https://twitter.com/LarryBotha">Larry Botha</a> from South African design agency Fixate has been interviewing well known achievers in web design and development on how to help front end developers write better code. 30 minutes. Weekly.</p>
<h3 id="podcasts-for-web-designers">Podcasts For Web Designers</h3>
<h4><a href="https://99percentinvisible.org/">99% Invisible</a></h4>
<p><a href="https://99percentinvisible.org/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/12a956e2-3028-4ca5-bc79-2a24979b43aa/logo-99invisible.png" width="180" height="180" alt="99% Invisible" /></a>Design is everywhere in our lives, perhaps most importantly in the places where we’ve just stopped noticing. 99% Invisible is a weekly exploration of the process and power of design and architecture, from award winning producer <a href="https://twitter.com/romanmars">Roman Mars</a>. 20-45 minutes. Weekly.</p>
<h4><a href="https://spec.fm/podcasts/design-details">Design Details</a></h4>
<p><a href="https://spec.fm/podcasts/design-details"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f72b2bd5-b54c-4c17-9c9e-8014f4aeb9db/logo-designdetails.png" width="180" height="180" alt="Design Details" /></a>A show about the people who design our favorite products, hosted by <a href="https://twitter.com/uberbryn">Bryn Jackson</a> and <a href="https://twitter.com/brian_lovin">Brian Lovin</a>. The Spec Network also produces <a href="https://spec.fm/podcasts/developer-tea">Developer Tea</a>. 60-90 minutes. Weekly.</p>
<h4><a href="https://www.relay.fm/presentable">Presentable</a></h4>
<p><a href="https://www.relay.fm/presentable"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/abb70591-653c-4e21-befc-a436ac103677/logo-presentable.png" width="180" height="180" alt="Presentable" /></a>Host <a href="https://twitter.com/veen">Jeffrey Veen</a> brings over two decades of experience as a designer, developer, entrepreneur, and investor as he chats with guests about how we design and build the products that are shaping our digital future and how design is changing the world. 45-60 minutes. Weekly.</p>
<h4><a href="https://responsivewebdesign.com/podcast/">Responsive Web Design</a></h4>
<p><a href="https://responsivewebdesign.com/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/82fbd731-3b16-4cff-9736-608a25c241e3/logo-rwd.png" width="180" height="180" alt="Responsive Web Design" /></a>In each episode, <a href="https://twitter.com/karenmcgrane">Karen McGrane</a> and <a href="https://twitter.com/beep">Ethan Marcotte</a> (who coined the term “responsive web design”) interview the people who make responsive redesigns happen. 15-30 minutes. Weekly. (<strong>STOP PRESS</strong>: <em>Karen and Ethan issued their final episode of this podcast on 26 March 2018</em>.)</p>
<h4><a href="https://responsivedesign.is/podcasts/">RWD Podcast</a></h4>
<p><a href="https://responsivedesign.is/podcasts/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fe880e1-68d0-40ab-9c83-a03cad9e8324/logo-rwdpodcast.png" width="180" height="180" alt="RWD Podcast" /></a>Host <a href="https://twitter.com/justinavery">Justin Avery</a> explores new and emerging web technologies, chats with web industry leaders and digs into all aspects of responsive web design. 10-60 minutes. Weekly / Monthly.</p>
<h4><a href="https://uxpodcast.com/">UXPodcast</a></h4>
<p><a href="https://uxpodcast.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48194e17-3e8e-42d3-b438-1289e84c064d/logo-uxpodcast.png" width="180" height="180" alt="UXPodcast" /></a>Business, technology and people in digital media. Moving the conversation beyond the traditional realm of User Experience. Hosted by <a href="https://twitter.com/axbom">Per Axbom</a> and <a href="https://twitter.com/beantin">James Royal-Lawson</a> from Sweden. 30-45 minutes. Every two weeks.</p>
<h4><a href="http://uxpod.com/">UXpod</a></h4>
<p><a href="http://uxpod.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2992676a-ab01-4db3-84ca-eb80ca5127bb/logo-uxpod.png" width="180" height="180" alt="UXpod" /></a>A free-ranging set of discussions on matters of interest to people involved in user experience design, website design, and usability in general. <a href="https://twitter.com/gerrygaffney">Gerry Gaffney</a> set this up to provide a platform for discussing topics of interest to UX practitioners. 30-45 minutes. Weekly / Monthly.</p>
<h4><a href="http://ux-radio.com/category/podcast/">UX-radio</a></h4>
<p><a href="http://ux-radio.com/category/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00856479-77cc-4340-8559-1bd74f62cc9c/logo-uxradio.png" width="180" height="180" alt="UX-radio" /></a>A podcast about IA, UX and Design that features collaborative discussions with industry experts to inspire, educate and share resources with the community. Created by <a href="https://twitter.com/lara_fedoroff">Lara Fedoroff</a> and co-hosted with <a href="https://twitter.com/chrischandler">Chris Chandler</a>. 30-45 minutes. Weekly / Monthly.</p>
<h4><a href="https://userdefenders.com/">User Defenders</a></h4>
<p><a href="https://userdefenders.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da291b6e-3482-4575-aa28-7bbad7c2a23c/logo-userdefenders.png" width="180" height="180" alt="User Defenders" /></a>Host <a href="https://twitter.com/JasonOgle">Jason Ogle</a> aims to highlight inspirational UX Designers leading the way in their craft, by diving deeper into who they are, and what makes them tick/successful, in order to inspire and equip those aspiring to do the same. 30-90 minutes. Weekly.</p>
<h4><a href="https://drunkenux.com/">The Drunken UX Podcast</a></h4>
<p><a href="https://drunkenux.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/afe27f6e-4479-41c1-8478-971eb2b5da8f/logo-drunkenux.png" width="180" height="180" alt="The Drunken UX Podcast" /></a>Our hosts <a href="https://twitter.com/fienen">Michael Fienen</a> and <a href="https://twitter.com/aaronmhill">Aaron Hill</a> look at issues facing websites and developers that impact the way we all use the web. “In the process, we’ll drink drinks, share thoughts, and hopefully make you laugh a little.” 60 minutes. Twice a week.</p>
<h4><a href="https://uibreakfast.com/category/podcast/">UI Breakfast Podcast</a></h4>
<p><a href="https://uibreakfast.com/category/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e18f1278-7147-4cd4-90a6-ef3f6dc77c37/logo-uibreakfast.png" width="180" height="180" alt="UI Breakfast Podcast" /></a>Join <a href="https://twitter.com/uibreakfast">Jane Portman</a> for conversations about UI/UX design, products, marketing, and so much more, with awesome guests who are industry experts ready to share actionable knowledge. 30-60 minutes. Weekly.</p>
<h4><a href="https://www.efficientlyeffective.fm/">Efficiently Effective</a></h4>
<p><a href="https://www.efficientlyeffective.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17e7a2e3-f7fe-4f3b-b02d-834ac754c3a7/logo-effeff.png" width="180" height="180" alt="Efficiently Effective" /></a><a href="https://twitter.com/SaskiaVideler">Saskia Videler</a> keeps us up to date with what’s happening in the field of UX and content strategy, aiming to help content experts, UX professionals and others create better digital experiences. 25-40 minutes. Monthly.</p>
<h4><a href="https://www.designcuts.com/honest-designers/">The Honest Designers Show</a></h4>
<p><a href="https://www.designcuts.com/honest-designers/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/826cad1e-3312-479a-81d6-1103f4603027/logo-honest.png" width="180" height="180" alt="The Honest Designers Show" /></a>Hosts Tom Ross, Ian Barnard, Dustin Lee and Lisa Glanz have each found success in their creative fields and are here to give struggling designers a completely honest, under the hood look at what it takes to flourish in the modern world. 30-60 minutes. Weekly.</p>
<h4><a href="https://designlife.fm/">Design Life</a></h4>
<p><a href="https://designlife.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2ab4749-8c8c-4b5a-bce2-2d26d8a8ae23/logo-designforlife.png" width="180" height="180" alt="Design Life" /></a>A podcast about design and side projects for motivated creators. Femke van Schoonhoven and Charli Prangley (serial side project addicts) saw a gap in the market for a conversational show hosted by two females about design and issues young creatives face. 30-45 minutes. Weekly.</p>
<h4><a href="http://layout.fm/">Layout FM</a></h4>
<p><a href="http://layout.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/daf682c6-c644-4cb8-8fb5-4f568afa7716/logo-layout.png" width="180" height="180" alt="Layout FM" /></a>A weekly podcast about design, technology, programming and everything else hosted by <a href="https://twitter.com/vernalkick">Kevin Clark</a> and <a href="https://twitter.com/rafahari">Rafael Conde</a>. 60-90 minutes. Weekly.</p>
<h4><a href="https://breadtime.simplecast.fm/">Bread Time</a></h4>
<p><a href="https://breadtime.simplecast.fm/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9e023265-dd05-4aff-acb9-21989f462116/logo-breadtime.png" width="180" height="180" alt="Bread Time" /></a><a href="https://twitter.com/gabrielvaldivia">Gabriel Valdivia</a> and <a href="https://twitter.com/charliedeets">Charlie Deets</a> host this micro-podcast about design and technology, the impact of each on the other, and the impact of them both on all of us. 10-30 minutes. Weekly.</p>
<h4><a href="http://thedeependdesign.com/graphic-design-podcast/">The Deeply Graphic DesignCast</a></h4>
<p><a href="http://thedeependdesign.com/graphic-design-podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf5e0c9c-0039-44b2-a0cb-073f3154916d/logo-deeplygraphic.png" width="180" height="180" alt="The Deeply Graphic DesignCast" /></a>Every episode covers a new graphic design-related topic, and a few relevant tangents along the way. <a href="https://twitter.com/wesmcdowell">Wes McDowell</a> and his co-hosts also answer listener-submitted questions in every episode. 60 minutes. Every two weeks.</p>
<h3 id="podcasts-web-internet-technology">Podcasts On The Web, The Internet, And Technology</h3>
<h4><a href="http://5by5.tv/bigwebshow">The Big Web Show</a></h4>
<p><a href="http://5by5.tv/bigwebshow"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99cec7ab-d768-4adf-be43-ad244a42189c/logo-bigwebshow.png" width="180" height="180" alt="The Big Web Show" /></a>Veteran web designer and industry standards champion <a href="https://twitter.com/zeldman">Jeffrey Zeldman</a> is joined by special guests to address topics like web publishing, art direction, content strategy, typography, web technology, and more. 60 minutes. Weekly.</p>
<h4><a href="http://shoptalkshow.com/">ShopTalk</a></h4>
<p><a href="http://shoptalkshow.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f0287db7-5738-475d-b920-24729132d3bd/logo-shoptalk.png" width="180" height="180" alt="ShopTalk" /></a>A podcast about front end web design, development and UX. Each week Chris Coyier and Dave Rupert are joined by a special guest to talk shop and answer listener submitted questions. 60 minutes. Weekly.</p>
<h4><a href="https://boagworld.com/show">Boagworld</a></h4>
<p><a href="https://boagworld.com/show"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45990449-9e73-4ff0-a228-66626ed31208/logo-boagworld.png" width="180" height="180" alt="Boagworld" /></a><a href="https://twitter.com/boagworld">Paul Boag</a> and <a href="https://twitter.com/marcus67">Marcus Lillington</a> are joined by a variety of guests to discuss a range of web design related topics. Fun, informative and quintessentially British, with content for designers, developers and website owners, something for everybody. 60 minutes. Weekly.</p>
<h4><a href="https://changelog.com/podcast">The Changelog</a></h4>
<p><a href="https://changelog.com/podcast"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1f342864-a1c0-4cf1-9040-cbce21006747/logo-changelog.png" width="180" height="180" alt="The Changelog" /></a>Conversations with the hackers, leaders, and innovators of open source. Hosts <a href="https://twitter.com/adamstac">Adam Stacoviak</a> and <a href="https://twitter.com/jerodsanto">Jerod Santo</a> do in-depth interviews with the best and brightest software engineers, hackers, leaders, and innovators. 60-90 minutes. Weekly.</p>
<h4><a href="https://backtofrontshow.com/">Back to Front Show</a></h4>
<p><a href="https://backtofrontshow.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c1f30580-4692-446f-8290-4152acfb747f/logo-backtofront.png" width="180" height="180" alt="Back to Front Show" /></a>Topics under discussion hosted by <a href="https://twitter.com/keirwhitaker">Keir Whitaker</a> and <a href="https://twitter.com/kieranmasterton">Kieran Masterton</a> include remote working, working in the web industry, productivity, hipster beards and much more. Released irregularly but always produced with passion. 30-60 minutes. Weekly / Monthly.</p>
<h4><a href="https://nextbillionseconds.com/">The Next Billion Seconds</a></h4>
<p><a href="https://nextbillionseconds.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2955c794-514f-4fe8-aa8f-6c69590579b8/logo-billionseconds.png" width="180" height="180" alt="The Next Billion Seconds" /></a>The coming “next billion seconds” are the most important in human history, as technology transforms the way we live and work. <a href="https://twitter.com/mpesce">Mark Pesce</a> talks to some of the brightest minds shaping our world. 30-60 minutes. Every two weeks.</p>
<h4><a href="https://spec.fm/podcasts/toolsday">Toolsday</a></h4>
<p><a href="https://spec.fm/podcasts/toolsday"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ceb724c3-06f7-441d-b4dc-529e2f68fe4c/logo-toolsday.png" width="180" height="180" alt="Toolsday" /></a>Hosted by <a href="https://twitter.com/Una">Una Kravets</a> and <a href="https://twitter.com/chrisdhanaraj">Chris Dhanaraj</a>, Toolsday is about the latest in tech tools, tips, and tricks. 30 minutes. Weekly.</p>
<h4><a href="https://www.gimletmedia.com/reply-all">Reply All</a></h4>
<p><a href="https://www.gimletmedia.com/reply-all"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1a3e4bb8-7719-49bd-a91f-7ee8d9554fae/logo-replyall.png" width="180" height="180" alt="Reply All" /></a>A podcast about the internet, often delving deeper into modern life. Hosted by <a href="https://twitter.com/pjvogt">PJ Vogt</a> and <a href="https://twitter.com/AGoldmund">Alex Goldman</a> from US narrative podcasting company Gimlet Media. 30-60 minutes. Weekly.</p>
<h4><a href="https://ctrlclickcast.com/">CTRL+CLICK CAST</a></h4>
<p><a href="https://ctrlclickcast.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a616108e-f8dc-4586-8415-0599f5eff2a7/logo-ctrlclickcast.png" width="180" height="180" alt="CTRL+CLICK CAST" /></a>Diverse voices from industry leaders and innovators, who tackle everything from design, code and CMS, to culture and business challenges. Focused, topical discussions hosted by <a href="https://twitter.com/lealea">Lea Alcantara</a> and <a href="https://twitter.com/emilylewis">Emily Lewis</a>. 60 minutes. Every two weeks.</p>
<h4><a href="http://modernweb.podbean.com/">Modern Web</a></h4>
<p><a href="http://modernweb.podbean.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46db60d2-a82e-4da7-8497-caacb476fa0e/logo-modernweb.png" width="180" height="180" alt="Modern Web" /></a>Explores next generation frameworks, standards, and techniques. Hosted by <a href="https://twitter.com/ladyleet">Tracy Lee</a>. Topics include EmberJS, ReactJS, AngularJS, ES2015, RxJS, functional reactive programming. 60 minutes. Weekly.</p>
<h4><a href="https://www.relativepaths.uk/">Relative Paths</a></h4>
<p><a href="https://www.relativepaths.uk/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/41b5df2c-a20e-4dc7-99e5-01365c053a4b/logo-relativepaths.png" width="180" height="180" alt="Relative Paths" /></a>A UK based podcast on “web development and stuff like that” for web industry types. Hosted by <a href="https://twitter.com/ex_jedi">Mark Phoenix</a> and <a href="https://twitter.com/meredevelopment">Ben Hutchings</a>. 60 minutes. Every two weeks.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<h3 id="business-podcasts-for-web-professionals">Business Podcasts For Web Professionals</h3>
<h4><a href="http://www.businessology.biz/">The Businessology Show</a></h4>
<p><a href="http://www.businessology.biz/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/604f8fa7-2cb0-44a1-aff9-9863182d4851/logo-businessology.png" width="180" height="180" alt="The Businessology Show" /></a>The Businessology Show is a podcast about the business of design and the design of business, hosted by CPA/coach <a href="https://twitter.com/JasonMBlumer">Jason Blumer</a>. 30 minutes. Monthly.</p>
<h4><a href="https://blog.codepen.io/radio/">CodePen Radio</a></h4>
<p><a href="https://blog.codepen.io/radio/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cbcc6455-3749-4cce-935f-c84f2701a496/logo-codepenradio.png" width="180" height="180" alt="CodePen Radio" /></a><a href="https://twitter.com/chriscoyier">Chris Coyier</a>, <a href="https://twitter.com/alexquez">Alex Vazquez</a>, and <a href="https://twitter.com/timsabat">Tim Sabat</a>, the co-founders of CodePen, talk about the ins and outs of running a small web software business. The good, the bad, and the ugly. 30 minutes. Weekly.</p>
<h4><a href="http://unmatchedstyle.com/category/bizcraft">BizCraft</a></h4>
<p><a href="http://unmatchedstyle.com/category/bizcraft"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dca1cbd9-f14b-4783-9060-df47ddb68fa4/logo-bizcraft.png" width="180" height="180" alt="BizCraft" /></a>Podcast about the business side of web design, recorded live almost every two weeks. Your hosts are <a href="https://twitter.com/carlsmith">Carl Smith</a> of nGen Works and <a href="https://twitter.com/genecrawford">Gene Crawford</a> of UnmatchedStyle. 45-60 minutes. Every two weeks.</p>
<h3 id="other-podcasts">Podcasts That Don’t Have Recent Episodes (But Do Have Great Archives)</h3>
<h4><a href="http://www.designreviewpodcast.com/">Design Review Podcast</a></h4>
<p><a href="http://www.designreviewpodcast.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b42ee372-851b-496d-a505-cf4b3d7c3184/logo-designreview.png" width="180" height="180" alt="Design Review Podcast" /></a>No chit-chat, just focused in-depth discussions about design topics that matter. <a href="https://twitter.com/DesignUXUI">Jonathan Shariat</a> and <a href="https://twitter.com/machinehuman">Chris Liu</a> are your hosts and bring to the table passion and years of experience. 30-60 minutes. Every two weeks. Last episode 26 November 2017.</p>
<h4><a href="http://styleguides.io/podcast/">Style Guide Podcast</a></h4>
<p><a href="http://styleguides.io/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7470797-98ea-4bf0-b3ba-2dea90aec53f/logo-styleguide.png" width="180" height="180" alt="Style Guide Podcast" /></a>A small batch series of interviews (20 in total) on Style Guides, hosted by <a href="https://twitter.com/anna_debenham">Anna Debenham</a> and <a href="https://twitter.com/brad_frost">Brad Frost</a>, with high profile designer guests. 45 minutes. Weekly. Last episode 19 November 2017.</p>
<h4><a href="www.truenorthpodcast.com/">True North</a></h4>
<p><a href="www.truenorthpodcast.com/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d6a1f4dd-c37f-4591-a9ce-a4ae23f3d132/logo-truenorth.png" width="180" height="180" alt="True North" /></a>Looks to uncover the stories of everyday people creating and designing, and highlight the research and testing that drives innovation. Produced by Loop11. 15-60 minutes. Every two weeks. Last episode 18 October 2017</p>
<h4><a href="https://uie.fm/shows/">UIE.fm Master Feed</a></h4>
<p><a href="https://uie.fm/shows/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51c060c9-f2f9-4cde-883c-ac57c3bce15c/logo-uie.png" width="180" height="180" alt="UIE.fm Master Feed" /></a>Get all episodes from every show on the UIE network in this master feed: <em>UIE Book Corner</em> (with <a href="https://twitter.com/achurchill">Adam Churchill</a>) and <em>The UIE Podcast</em> (with <a href="https://twitter.com/jmspool">Jared Spool</a>) plus some archived older shows. 15-60 minutes. Weekly. Last episode 4 October 2017.</p>
<h4><a href="http://www.mistakes.show/">Let’s Make Mistakes</a></h4>
<p><a href="http://www.mistakes.show/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f904a5be-0ed7-4a83-9d01-8f4daa288b8e/logo-letsmakemistakes.png" width="180" height="180" alt="Let’s Make Mistakes" /></a>A podcast about design with your hosts, <a href="https://twitter.com/monteiro">Mike Monteiro</a>, <a href="https://twitter.com/liamdanger">Liam Campbell</a>, <a href="https://twitter.com/steph_monette">Steph Monette</a>, and <a href="https://twitter.com/SevenM0rris">Seven Morris</a>, plus a range of guests who discuss good design, business and ethics. 45-60 minutes. Weekly / Monthly. Last episode 3 August 2017.</p>
<h4><a href="http://motionandmeaning.io/">Motion and Meaning</a></h4>
<p><a href="http://motionandmeaning.io/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/586ea721-84a1-48d6-b43d-f215e2e01d39/logo-motionandmeaning.png" width="180" height="180" alt="Motion and Meaning" /></a>A podcast about motion for digital designers brought to you by <a href="https://twitter.com/vlh">Val Head</a> and <a href="https://twitter.com/Cennydd">Cennydd Bowles</a>, covering everything from the basic principles of animation through to advanced tools and techniques. 30 minutes. Monthly. Last episode 13 December 2016.</p>
<h4><a href="http://5by5.tv/webahead">The Web Ahead</a></h4>
<p><a href="http://5by5.tv/webahead"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99a68131-0e79-4ff2-a9d8-5b3e23d3309c/logo-thewebahead.png" width="180" height="180" alt="The Web Ahead" /></a>Conversations with world experts on changing technologies and future of the web. The Web Ahead is your shortcut to keeping up. Hosted by <a href="https://twitter.com/jensimmons">Jen Simmons</a>. 60-100 minutes. Monthly. Last episode 30 June 2016.</p>
<h4><a href="http://www.unfinished.bz/">Unfinished Business</a></h4>
<p><a href="http://www.unfinished.bz/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/89290551-e74b-4b9c-9eac-007de47d770d/logo-unfinished.png" width="180" height="180" alt="Unfinished Business" /></a>UK designer <a href="https://twitter.com/Malarkey">Andy Clarke</a> and guests have plenty to talk about, mostly on and around web design, creative work and modern life. 60-90 minutes. Monthly. Last episode 28 June 2016. (<strong>STOP PRESS</strong>: <em>A new episode was issued on 20 March 2018. Looks like it’s back in action.</em>)</p>
<h4><a href="https://www.portigal.com/podcast/">Dollars to Donuts</a></h4>
<p><a href="https://www.portigal.com/podcast/"><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9023686b-1385-4760-ae30-5aefef2abd3c/logo-dollarstodonuts.png" width="180" height="180" alt="Dollars to Donuts" /></a>A podcast where <a href="https://twitter.com/steveportigal">Steve Portigal</a> talks with the people who lead user research in their organizations. 50-75 minutes. Irregular. Last episode 10 May 2016.</p>
<h3>Any Other Good Ones Missing?</h3>
<p>As we noted, there are probably many other good podcasts out there for web designers and developers. If we’ve missed your favorite, let us know about it in the comments, or in the original threads on <a href="https://twitter.com/smashingmag/status/973534607466524672">Twitter</a> or <a href="https://www.facebook.com/vitaly.friedman/posts/10160057978125573?comment_id=10160061985165573&notif_id=1520967841287938&notif_t=feed_comment&ref=notif">Facebook</a>.</p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(vf, ra, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Tim Noetzel</author>
<title>How To Improve Your Design Process With Data-Based Personas</title>
<link>https://www.smashingmagazine.com/2018/04/design-process-data-based-personas/</link>
<pubDate>Tue, 17 Apr 2018 13:40:40 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/design-process-data-based-personas/</guid>
<description>Most design and product teams have some type of persona document. Theoretically, personas help us better understand our users and meet their needs. The idea is that codifying what we’ve learned about distinct groups of users helps us make better design decisions. Referring to these documents ourselves and sharing them with non-design team members and external stakeholders should ultimately lead to a user experience more closely aligned with what real users actually need.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/design-process-data-based-personas/" />
<title>How To Improve Your Design Process With Data-Based Personas</title>
</head>
<body>
<article>
<header>
<h1>How To Improve Your Design Process With Data-Based Personas</h1>
<address>Tim Noetzel</address>
<time datetime="2018-04-17T13:40:40+02:00" class="op-published">2018-04-17T13:40:40+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>Most design and product teams have some type of persona document. Theoretically, personas help us better understand our users and meet their needs. The idea is that codifying what we’ve learned about distinct groups of users helps us make better design decisions. Referring to these documents ourselves and sharing them with non-design team members and external stakeholders should ultimately lead to a user experience more closely aligned with what real users actually need.</p>
<p>In reality, personas rarely prove equal to these expectations. On many teams, persona documents sit abandoned on hard drives, collecting digital dust while designers continue to create products based primarily on whim and intuition.</p>
<p>In contrast, well-researched personas serve as a proxy for the user. They help us check our work and ensure that we’re building things users really need.</p>
<p>In fact, the best personas don’t just describe users; they actually help designers predict their behavior. In her article on persona creation, Laura Klein <a href="https://www.invisionapp.com/blog/predictive-personas/">describes it perfectly</a>:</p>
<blockquote>“If you can create a predictive persona, it means you truly know not just what your users are like, but the exact factors that make it likely that a person will become and remain a happy customer.”</blockquote>
<p>In other words, <em>useful</em> personas actually help design teams make better decisions because they can predict with some accuracy how users will respond to potential product changes.</p>
<p>Obviously, for personas to facilitate these types of predictions, they need to be based on more than intuition and anecdotes. They need to be data-driven.</p>
<p>So, what do data-driven personas look like, and how do you make one?</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber" data-remove="true">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>
Is your pattern library up to date today? <em>Alla Kholmatova</em> has just finished a fully fledged book on <strong>Design Systems</strong> and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. <em>Just sayin'.</em>
</p>
<a href="https://www.smashingmagazine.com/printed-books/design-systems/">
<button class="btn btn--green btn--large">
Table of Contents →
</button>
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/printed-books/design-systems/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/books/design-systems--large-opt.png">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<h3>Start With What You Think You Know</h3>
<p>The first step in creating data-driven personas is similar to the typical persona creation process. Write down your team’s hypotheses about what the key user groups are and what’s important to each group.</p>
<p>If your team is like most, some members will disagree with others about which groups are important, the particular makeup and qualities of each persona, and so on. This type of disagreement is healthy, but unlike the usual persona creation process you may be used to, you’re not going to get bogged down here.</p>
<p>Instead of debating the merits of each persona (and the various facets and permutations thereof), the important thing is to be specific about the different hypotheses you and your team have and write them down. You’re going to validate these hypotheses later, so it’s okay if your team disagrees at this stage. You may choose to focus on a few particular personas, but make sure to keep a backlog of other ideas as well.</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png"
sizes="100vw"
alt="Hypothetical Personas"
/>
<figcaption class="op-vertical-bottom">
First, start by recording all the hypotheses you have about key personas. You’ll refine these through user research in the next step. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee48c787-c759-4774-8b44-f2d8ef16aeeb/persona-hypotheses.png'>Large preview</a>)
</figcaption>
</figure>
<p>I recommend aiming for a short, 1–2 sentence description of each hypothetical persona that details who they are, what root problem they hope to solve by using your product, and any other pertinent details.</p>
<p>You can use the traditional <a href="https://www.smashingmagazine.com/2018/01/comprehensive-guide-product-design/#4-ideation">user stories framework</a> for this. If you were creating hypothetical personas for Craigslist, one of these statements might read:</p>
<blockquote>“As a recent college grad, I want to find cheap furniture so I can furnish my new apartment.”</blockquote>
<p>Another might say:</p>
<blockquote>“As a homeowner with an extra bedroom, I want to find a responsible tenant to rent this space to so I can earn some extra income.”</blockquote>
<p>If you have existing data — things like user feedback emails, NPS scores, user interview notes, or analytics data — be sure to go over them and include relevant data points in your notes along with your user stories.</p>
<h3>Validate And Refine</h3>
<p>The next step is to validate and refine these hypotheses with user interviews. For each of your hypothetical personas, you’ll want to start by interviewing 5 to 10 people who fit that group.</p>
<p>You have three key goals for these interviews. For each group, you need to:</p>
<ol>
<li>Understand the context in which they need to solve the problem.</li>
<li>Confirm that members of the persona group agree that the problem you recorded is an urgent and painful one that they struggle to solve now.</li>
<li>Identify key predictors of whether a member of this persona is likely to become and remain an active user.</li>
</ol>
<p>The approach you take to these interviews may vary, but I recommend a hybrid approach between a traditional user interview, which is very non-leading, and a <a href="http://startitup.co/guides/285/problem-interview-script">Lean Problem</a> interview, which is deliberately leading.</p>
<p>Start with the traditional user interview approach and ask <a href="https://medium.com/interactive-mind/5-steps-to-create-good-user-interview-questions-by-metacole-a-comprehensive-guide-8a591b0e2162">behavior-based, non-leading questions</a>. In the Craigslist example, we might ask the recent college grad something like:</p>
<blockquote>“Tell me about the last time you purchased furniture. What did you buy? Where did you buy it?”</blockquote>
<p>These types of questions are great for establishing whether the interviewee recently experienced the problem in question, how they solved it, and whether they’re dissatisfied with their current solution.</p>
<p>Once you’ve finished asking these types of questions, move on to the <em>Lean Problem</em> portion of the interview. In this section, you want to tell a story about a time when you experienced the problem — establishing the various issues you struggled with and why it was frustrating — and see how they respond.</p>
<p>You might say something like this:</p>
<blockquote>“When I graduated college, I had to get new furniture because I wasn’t living in the dorm anymore. I spent forever looking at furniture stores, but they were all either ridiculously expensive or big-box stores with super-cheap furniture I knew would break in a few weeks. I really wanted to find good furniture at a reasonable price, but I couldn’t find anything and I eventually just bought the cheap stuff. It inevitably broke, and I had to spend even more money, which I couldn’t really afford. Does any of that resonate with you?”</blockquote>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>What you’re looking for here is emphatic agreement. If your interviewee says "yes, that resonates" but doesn’t get much more excited than they were during the rest of the interview, the problem probably wasn’t that painful for them.</p>
<figure >
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png"
sizes="100vw"
alt="Data-Driven Personas Interview Format"
/>
<figcaption class="op-vertical-bottom">
You can validate or invalidate your persona hypotheses with a series of quick, 30-minute interviews. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f3cdb57-4574-49f5-a89a-b4244b9588b4/data-driven-persona-interviews.png'>Large preview</a>)
</figcaption>
</figure>
<p>On the other hand, if they get excited, empathize with your story, or give their own anecdote about the problem, you know you’ve found a problem they really care about and need to be solved.</p>
<p>Finally, make sure to ask any demographic questions you didn’t cover earlier, especially those around key attributes you think might be significant predictors of whether somebody will become and remain a user. For example, you might think that recent college grads who get high-paying jobs aren’t likely to become users because they can afford to buy furniture at retail; if so, be sure to ask about income.</p>
<p>You’re looking for predictable patterns. If you bring in 5 members of your persona and 4 of them have the problem you’re trying to solve and desperately want a solution, you’ve probably identified a key persona.</p>
<p>On the other hand, if you’re getting inconsistent results, you likely need to refine your hypothetical persona and repeat this process, using what you learn in your interviews to form new hypotheses to test. If you can’t consistently find users who have the problem you want to solve, it’s going to be nearly impossible to get millions of them to use your product. So don’t skimp on this step.</p>
<h3>Create Your Personas</h3>
<p>The penultimate step in this process is creating the actual personas themselves. This is where things get interesting. Unlike traditional personas, which are typically static, your data-driven personas will be living, breathing documents.</p>
<p>The goal here is to combine the lessons you learned in the previous step — about who the user is and what they need — with data that shows how well the latest iteration of your product is serving their needs.</p>
<p>At my company <a href="https://swish.com">Swish</a>, each one of our personas includes two sections with the following data:</p>
<table class="tablesaw break-out" data-tablesaw-mode="swipe" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Predictive User Data</th>
<th>Product Performance Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Description of the user including predictive demographics.</td>
<td>The percentage of our <em>current</em> user base the persona represents.</td>
</tr>
<tr>
<td>Quotes from at least 3 actual users that describe the <a href="https://www.invisionapp.com/blog/know-your-customer/">jobs-to-be-done</a>.</td>
<td>Latest <a href="http://blog.popcornmetrics.com/pirate-metrics-aarrr-a-beginners-guide-for-entrepreneurs-marketers-and-agencies/">activation, retention, and referral rates</a> for the persona.</td>
</tr>
<tr>
<td>The percentage of the <em>potential</em> user base the persona represents.</td>
<td>Current NPS Score for the persona.</td>
</tr>
</tbody>
</table>
<p>If you’re looking for more ideas for data to include, check out <a href="https://www.slideshare.net/coryndon/scaling-empathy-with-personas">Coryndon Luxmoore’s presentation</a> on how his team created data-driven personas at Buildium.</p>
<p>It may take some time for your team to produce all this information, but it’s okay to start with what you have and improve the personas over time. Your personas won’t be sitting on a shelf. Every time you release a new feature or change an existing one, you should measure the results and update your personas accordingly.</p>
<h3>Integrate Your Personas Into Your Workflow</h3>
<p>Now that you’ve created your personas, it’s time to actually use them in your day-to-day design process. Here are 4 opportunities to use your new data-driven personas: </p>
<ol>
<li><strong>At Standups</strong><br />At Swish, our standups are a bit different. We start these meetings by reviewing the activation, retention, and referral metrics for each persona. This ensures that — as we discuss yesterday’s progress and today’s obstacles — we remain focused on what really matters: how well we’re serving our users.</li>
<li><strong>During Prioritization</strong><br />Your data-driven personas are a great way to keep team members honest as you discuss new features and changes. When you know how much of your user base the persona represents and how well you’re serving them, it quickly becomes obvious whether a potential feature could actually make a difference. Suddenly deciding what to work on won’t require hours of debate or horse-trading.</li>
<li><strong>At Design Reviews</strong><br />Your data-driven personas are a great way to keep team members honest as you discuss new designs. When team members can creditably represent users with actual quotes from user interviews, their feedback quickly becomes less subjective and more useful.</li>
<li><strong>When Onboarding New Team Members</strong><br />New hires inevitably bring a host of implicit biases and assumptions about the user with them when they start. By including your data-driven personas in their onboarding documents, you can get new team members up to speed much more quickly and ensure they understand the hard-earned lessons your team learned along the way.</li>
</ol>
<h3>Keeping Your Personas Up To Date</h3>
<p>It’s vitally important to keep your personas up-to-date so your team members can continue to rely on them to guide their design thinking.</p>
<p>As your product improves, it’s simple to update NPS scores and performance data. I recommend doing this monthly at a minimum; if you’re working on an early-stage, rapidly-changing product, you’ll get better mileage by updating these stats weekly instead.</p>
<p>It’s also important to check in with members of your personas periodically to make sure your predictive data stays relevant. As your product evolves and the competitive landscape changes, your users’ views about their problems will change as well. If your growth starts to plateau, another round of interviews may help to unlock insights you didn’t find the first time. Even if everything is going well, try to check in with members of your personas — both current users of your product and some non-users — every 6 to 12 months.</p>
<h3>Wrapping Up</h3>
<p>Building data-driven personas is a challenging project that takes time and dedication. You won’t uncover the insights you need or build the conviction necessary to unify your team with a week-long throwaway project.</p>
<p>But if you put in the time and effort necessary, the results will speak for themselves. Having the type of clarity that data-driven personas provide makes it far easier to iterate quickly, improve your user experience, and build a product your users love.</p>
<h4>Further Reading</h4>
<p>If you’re interested in learning more, I highly recommend checking out the linked articles above, as well as the following resources:</p>
<ul>
<li>“<a href="https://www.amazon.com/Running-Lean-Iterate-Plan-Works/dp/1449305172">Running Lean: How to Iterate from Plan A to a Plan That Works</a>,” Ash Maurya</li>
<li>“<a href="https://conversionxl.com/blog/user-personas/">How to Build Robust User Personas in Under a Month</a>,” Tony Zambito, ConversionXL</li>
<li>“<a href="http://alistapart.com/article/resurrecting-dead-personas">Resurrecting Dead Personas</a>,” Meg Dickey-Kurdziolek, A List Apart</li>
<li>“<a href="https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-2/">A Closer Look At Personas: A Guide To Developing The Right Ones</a>,” Shlomo Goltz, Smashing Magazine.</li>
</ul>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(rb, ra, yk, il)</span>
</div>
<div id="sponsors-article-end" data-impression="true" class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Rachel Andrew</author>
<title>Best Practices With CSS Grid Layout</title>
<link>https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/</link>
<pubDate>Mon, 16 Apr 2018 13:35:19 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/</guid>
<description>An increasingly common question &mdash; now that people are using CSS Grid Layout in production &mdash; seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/" />
<title>Best Practices With CSS Grid Layout</title>
</head>
<body>
<article>
<header>
<h1>Best Practices With CSS Grid Layout</h1>
<address>Rachel Andrew</address>
<time datetime="2018-04-16T13:35:19+02:00" class="op-published">2018-04-16T13:35:19+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work.</p>
<p>Looking deeper, I think perhaps this request for “best practices” perhaps indicates a lack of confidence in using a layout method that is very different from what came before. Perhaps a concern that we are using Grid for things it wasn’t designed for, or not using Grid when we should be. Maybe it comes down to worries about supporting older browsers, or in how Grid fits into our development workflow.</p>
<p>In this article, I’m going to try and cover some of the things that either could be described as best practices, and some things that you probably don’t need to worry about.</p>
<h3 id="the-survey">The Survey</h3>
<p>To help inform this article, I wanted to find out how other people were using Grid Layout in production, what were the challenges they faced, what did they really enjoy about it? Were there common questions, problems or methods being used. To find out, I put together a quick survey, asking questions about how people were using Grid Layout, and in particular, what they most liked and what they found challenging.</p>
<p>In the article that follows, I’ll be referencing and directly quoting some of those responses. I’ll also be linking to lots of other resources, where you can find out more about the techniques described. As it turned out, there was far more than one article worth of interesting things to unpack in the survey responses. I’ll address some of the other things that came up in a future post.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Nope, we can't do any magic tricks, but we have articles, <a href="https://www.smashingmagazine.com/books">books</a> and <a href="https://www.smashingmagazine.com/smashing-tv/">webinars</a> featuring techniques we all can use to improve our work. <a href="https://www.smashingmagazine.com/membership/?utm_medium=panel">Smashing Members</a> get a seasoned selection of magic front-end tricks — e.g. <strong>live designing sessions</strong> and perf audits, too. <em>Just sayin'</em>! ;-)</p>
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="btn btn--green btn--large">
Explore Smashing Wizardry →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-wizard.svg" alt="Smashing Cat, just preparing to do some magic stuff." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<h3 id="accessibility">Accessibility</h3>
<p>If there is any part of the Grid specification that you need to take care when using, it is when using anything that could cause content re-ordering:</p>
<blockquote>“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”<br /><br />— <a href="https://www.w3.org/TR/css-grid-1/#order-accessibility">Grid Specification: Re-ordering and Accessibility</a></blockquote>
<p>This is not unique to Grid, however, the ability to rearrange content so easily in two dimensions makes it a bigger problem for Grid. However, if using any method that allows content re-ordering — be that Grid, Flexbox or even absolute positioning — you need to take care not to disconnect the visual experience from how the content is structured in the document. Screen readers (and people navigating around the document using a keyboard only) are going to be following the order of items in the source.</p>
<p>The places where you need to be particularly careful are when using <code>flex-direction</code> to reverse the order in Flexbox; the <code>order</code> property in Flexbox or Grid; any placement of Grid items using any method, if it moves items out of the logical order in the document; and using the dense packing mode of <code>grid-auto-flow</code>.</p>
<p>For more information on this issue, see the following resources:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid Layout and Accessibility - MDN</a></li>
<li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li>
</ul>
<h3 id="which-grid-layout-methods-should-i-use">Which Grid Layout Methods Should I Use?</h3>
<blockquote>”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”<br /><br />— <a href="https://twitter.com/mbarker_84">Michelle Barker</a></blockquote>
<p>When you first take a look at Grid, it might seem overwhelming with so many different ways of creating a layout. Ultimately, however, it all comes down to things being positioned from one line of the grid to another. You have choices based on the of layout you are trying to achieve, as well as what works well for your team and the site you are building.</p>
<p>There is no right or wrong way. Below, I will pick up on some of the common themes of confusion. I’ve also already covered many other potential areas of confusion in a previous article “<a href="https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/">Grid Gotchas and Stumbling Blocks</a>.”</p>
<h4 id="should-i-use-an-implicit-or-explicit-grid">Should I Use An Implicit Or Explicit Grid?</h4>
<p>The grid you define with <code>grid-template-columns</code> and <code>grid-template-rows</code> is known as the Explicit Grid. The Explicit Grid enables the naming of lines on the Grid and also gives you the ability to target the end line of the grid with <code>-1</code>. You’ll choose an Explicit Grid to do either of these things and in general when you have a layout all designed and know exactly where your grid lines should go and the size of the tracks.</p>
<p>I use the Implicit Grid most often for row tracks. I want to define the columns but then rows will just be auto-sized and grow to contain the content. You can control the Implicit Grid to some extent with <code>grid-auto-columns</code> and <code>grid-auto-rows</code>, however, you have less control than if you are defining everything.</p>
<p>You need to decide whether you know exactly how much content you have and therefore the number of rows and columns — in which case you can create an Explicit Grid. If you do not know how much content you have, but simply want rows or columns created to hold whatever there is, you will use the Implicit Grid.</p>
<p>Nevertheless, it’s possible to combine the two. In the below CSS, I have defined three columns in the Explicit Grid and three rows, so the first three rows of content will be the following:</p>
<ul>
<li>A track of at least 200px in height, but expanding to take content taller,</li>
<li>A track fixed at 400px in height,</li>
<li>A track of at least 300px in height (but expands).</li>
</ul>
<p>Any further content will go into a row created in the Implicit Grid, and I am using the <code>grid-auto-rows</code> property to make those tracks at least 300px tall, expanding to <code>auto</code>.</p>
<pre><code class="language-css">.grid {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: minmax(200px auto) 400px minmax(300px, auto);
grid-auto-rows: minmax(300px, auto);
grid-gap: 20px;
}</code></pre>
<h4 id="a-flexible-grid-with-a-flexible-number-of-columns">A Flexible Grid With A Flexible Number Of Columns</h4>
<p>By using Repeat Notation, autofill, and minmax you can create a pattern of as many tracks as will fit into a container, thus removing the need for Media Queries to some extent. This technique can be found in <a href="https://gridbyexample.com/video/series-auto-fill-auto-fit/">this video tutorial</a>, and also demonstrated along with similar ideas in my recent article “<a href="https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/">Using Media Queries For Responsive Design In 2018</a>.”</p>
<p>Choose this technique when you are happy for content to drop below earlier content when there is less space, and are happy to allow a lot of flexibility in sizing. You have specifically asked for your columns to display with a minimum size, and to <strong>auto fill</strong>.</p>
<p>There were a few comments in the survey that made me wonder if people were choosing this method when they really wanted a grid with a fixed number of columns. If you are ending up with an unpredictable number of columns at certain breakpoints, you might be better to set the number of columns — and redefine it with media queries as needed — rather than using <code>auto-fill</code> or <code>auto-fit</code>.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<h4 id="which-method-of-track-sizing-should-i-use">Which Method Of Track Sizing Should I Use?</h4>
<p>I described track sizing in detail in my article “<a href="https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/">How Big Is That Box? Understanding Sizing In Grid Layout</a>,” however, I often get questions as to which method of track sizing to use. Particularly, I get asked about the difference between percentage sizing and the <code>fr</code> unit.</p>
<p>If you simply use the <code>fr</code> unit as specced, then it differs from using a percentage because it distributes available space. If you place a larger item into a track then the way the <code>fr</code> until will work is to allow that track to take up more space and distribute what is left over.</p>
<pre><code class="language-css">.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
</code></pre>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df8d1430-5e25-47f3-a26c-e0b977c9e435/fr-min-auto.png"
sizes="100vw"
alt="A three column layout, the first column is wider"
/>
</a>
<figcaption class="op-vertical-bottom">
The first column is wider as Grid has assigned it more space.
</figcaption>
</figure>
<p>To cause the <code>fr</code> unit to distribute <strong>all</strong> of the space in the grid container you need to give it a minimum size of <code>0</code> using <code>minmax()</code>.</p>
<pre><code class="language-css">.grid {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
grid-gap: 20px;
}</code></pre>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/02a0ded5-9fdc-47ed-850f-9abc4e324fe7/fr-min0.png"
sizes="100vw"
alt="three equal columns with the first overflowing"
/>
</a>
<figcaption class="op-vertical-bottom">
Forcing a 0 minimum may cause overflows
</figcaption>
</figure>
<p>So you can choose to use <code>fr</code> in either of these scenarios: ones where you do want space distribution from a basis of auto (the default behavior), and those where you want equal distribution. I would typically use the <code>fr</code> unit as it then works out the sizing for you, and enables the use of fixed width tracks or gaps. The only time I use a percentage instead is when I am adding grid components to an existing layout that uses other layout methods too. If I want my grid components to line up with a float- or flex-based layout which is using percentages, using them in my grid layout means everything uses the same sizing method.</p>
<h4 id="auto-place-items-or-set-their-position">Auto-Place Items Or Set Their Position?</h4>
<p>You will often find that you only need to place one or two items in your layout, and the rest fall into place based on content order. In fact, this is a really good test that you haven’t disconnected the source and visual display. If things pretty much drop into position based on auto-placement, then they are probably in a good order.</p>
<p>Once I have decided where everything goes, however, I do tend to assign a position to everything. This means that I don’t end up with strange things happening if someone adds something to the document and grid auto-places it somewhere unexpected, thus throwing out the layout. If everything is placed, Grid will put that item into the next available empty grid cell. That might not be exactly where you want it, but sat down at the end of your layout is probably better than popping into the middle and pushing other things around.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber" data-remove="true">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>
Is your pattern library up to date today? <em>Alla Kholmatova</em> has just finished a fully fledged book on <strong>Design Systems</strong> and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. <em>Just sayin'.</em>
</p>
<a href="https://www.smashingmagazine.com/printed-books/design-systems/">
<button class="btn btn--green btn--large">
Table of Contents →
</button>
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/printed-books/design-systems/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/books/design-systems--large-opt.png">
</div>
</a>
</div>
</div>
</aside>
<h4 id="which-positioning-method-to-use">Which Positioning Method To Use?</h4>
<p>When working with Grid Layout, ultimately everything comes down to placing items from one line to another. Everything else is essentially a helper for that.</p>
<p>Decide with your team if you want to name lines, use Grid Template Areas, or if you are going to use a combination of different types of layout. I find that I like to use Grid Template Areas for small components in particular. However, there is no right or wrong. Work out what is best for you.</p>
<h3 id="grid-in-combination-with-other-layout-mechanisms">Grid In Combination With Other Layout Mechanisms</h3>
<p>Remember that Grid Layout isn’t the one true layout method to rule them all, it’s designed for a certain type of layout — namely two-dimensional layout. Other layout methods still exist and you should consider each pattern and what suits it best.</p>
<p>I think this is actually quite hard for those of us used to hacking around with layout methods to make them do something they were not really designed for. It is a really good time to take a step back, look at the layout methods for the tasks they were designed for, and remember to use them for those tasks.</p>
<p>In particular, no matter how often I write about Grid versus Flexbox, I will be asked which one people <em>should</em> use. There are many patterns where either layout method makes perfect sense and it really is up to you. No-one is going to shout at you for selecting Flexbox over Grid, or Grid over Flexbox.</p>
<p>In my own work, I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around. I also often use Flexbox because I want alignment, given that the Box Alignment properties are only available to use in Flexbox and Grid. I might have a Flex container with one child item, in order that I can align that child.</p>
<p>A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting <code>flex-grow</code> to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for). However, try both, and see which seems to suit the content or design pattern best. You are unlikely to be causing any problems by doing so.</p>
<h3 id="nesting-grid-and-flex-items">Nesting Grid And Flex Items</h3>
<p>This also comes up a lot, and there is absolutely no problem with making a Grid Item also a Grid Container, thus nesting one grid inside another. You can do the same with Flexbox, making a Flex Item and Flex Container. You can also make a Grid Item and Flex Container or a Flex Item a Grid Container — none of these things are a problem!</p>
<p>What we can’t currently do is nest one grid inside another and have the nested grid use the grid tracks defined on the overall parent. This would be very useful and is what the subgrid proposals in <a href="https://drafts.csswg.org/css-grid-2/">Level 2 of the Grid Specification</a> hope to solve. A nested grid currently becomes a new grid so you would need to be careful with sizing to ensure it aligns with any parent tracks.</p>
<h3 id="you-can-have-many-grids-on-one-page">You Can Have Many Grids On One Page</h3>
<p>A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be confined to the main layout, and that many grids on one page were perhaps not a good thing. <strong>You can have as many grids as you like!</strong> Use grid for big things and small things, if it makes sense laid out as a grid then use Grid.</p>
<h3 id="fallbacks-and-supporting-older-browsers">Fallbacks And Supporting Older Browsers</h3>
<blockquote>“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”<br /><br />— <a href="https://twitter.com/joelambert">Joe Lambert</a> working on <a href="https://www.rareloop.com">rareloop.com</a></blockquote>
<p>In the survey, many people mentioned older browsers, however, there was a reasonably equal split between those who felt that supporting older browsers was hard and those who felt it was easy due to Feature Queries and the fact that Grid overrides other layout methods. I’ve written at length about the mechanics of creating these fallbacks in “<a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Using CSS Grid: Supporting Browsers Without Grid</a>.”</p>
<p>In general, modern browsers are far more interoperable than their earlier counterparts. We tend to see far fewer actual “browser bugs” and if you use HTML and CSS correctly, then you will generally find that what you see in one browser is the same as in another.</p>
<p>We do, of course, have situations in which one browser has not yet shipped support for a certain specification, or some parts of a specification. With Grid, we have been very fortunate in that browsers shipped Grid Layout in a very complete and interoperable way within a short time of each other. Therefore, our considerations for testing tend to be to need to test browsers with Grid and without Grid. You may also have chosen to use the <code>-ms</code> prefixed version in IE10 and IE11, which would then require testing as a third type of browser.</p>
<p>Browsers which support modern Grid Layout (not the IE version) also support Feature Queries. This means that you can test for Grid support before using it.</p>
<h3 id="testing-browsers-that-don-t-support-grid">Testing Browsers That Don’t Support Grid</h3>
<p>When using fallbacks for browsers without support for Grid Layout (or using the <code>-ms</code> prefixed version for IE10 and 11), you will want to test how those browsers render Grid Layout. To do this, you need a way to view your site in an example browser.</p>
<p>I would not take the approach of breaking your Feature Query by checking for support of something nonsensical, or misspelling the value <code>grid</code>. This approach will only work if your stylesheet is incredibly simple, and you have put absolutely everything to do with your Grid Layout inside the Feature Queries. This is a very fragile and time-consuming way to work, especially if you are extensively using Grid. In addition, an older browser will not just lack support for Grid Layout, there will be other CSS properties unsupported too. If you are looking for “best practice” then setting yourself up so you are in a good position to test your work is high up there!</p>
<p>There are a couple of straightforward ways to set yourself up with a proper method of testing your fallbacks. The easiest method — if you have a reasonably fast internet connection and don’t mind paying a subscription fee — is to use a service such as BrowserStack. This is a service that enables viewing of websites (even those in development on your computer) on a whole host of real browsers. BrowserStack does offer <a href="https://www.browserstack.com/open-source">free accounts for open-source projects</a>.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b054565-b4ed-4c06-a209-c14c3188ab75/ie-vms.png"
sizes="100vw"
alt="Screenshot of the download page"
/>
</a>
<figcaption class="op-vertical-bottom">
You can download Virtual Machines for testing from Microsoft.
</figcaption>
</figure>
<p>To test locally, my suggestion would be to use a Virtual Machine with your target browser installed. Microsoft offers free <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">Virtual Machine downloads</a> with versions of IE back to IE8, and also Edge. You can also install onto the VM an older version of a browser with no Grid support at all. <a href="https://ftp.mozilla.org/pub/firefox/releases/">For example by getting a copy of Firefox 51 or below</a>. After installing your elderly Firefox, be sure to <a href="https://support.mozilla.org/en-US/kb/install-older-version-of-firefox">turn off automatic updates as explained here</a> as otherwise it will quietly update itself!</p>
<p>You can then test your site in IE11 and in non-supporting Firefox on one VM (a far less fragile solution than misspelling values). Getting set up might take you an hour or so, but you’ll then be in a really good place to test your fallbacks.</p>
<h3 id="unlearning-old-habits">Unlearning Old Habits</h3>
<blockquote>“It was my first time to use Grid Layout, so there were a lot of concepts to learn and properties understand. Conceptually, I found the most difficult thing to unlearn all the stuff I had done for years, like clearing floats and packing everything in container divs.”<br /><br />— <a href="https://twitter.com/hdv">Hidde</a> working on <a href="https://hiddedevries.nl/en">hiddedevries.nl/en</a></blockquote>
<p>Many of the people responding to the survey mentioned the need to unlearn old habits and how learning Layout would be easier for people completely new to CSS. I tend to agree. When teaching people in person complete beginners have little problem using Grid while experienced developers try hard to return grid to a one-dimensional layout method. I’ve seen attempts at “grid systems” using CSS Grid which add back in the row wrappers needed for a float or flex-based grid.</p>
<p><strong>Don’t be afraid to try out new techniques</strong>. If you have the ability to test in a few browsers and remain mindful of potential issues of accessibility, you really can’t go too far wrong. And, if you find a great way to create a certain pattern, let everyone else know about it. We are all new to using Grid in production, so there is certainly plenty to discover and share.</p>
<blockquote>“Grid Layout is the most exciting CSS development since media queries. It's been so well thought through for real-world developer needs and is an absolute joy to use in production - for designers and developers alike.”<br /><br />— <a href="https://twitter.com/trysmudford">Trys Mudford</a> working on <a href="https://www.trysmudford.com">trysmudford.com</a></blockquote>
<p>To wrap up, here is a very short list of current best practices! If you have discovered things that do or don’t work well in your own situation, add them to the comments.</p>
<ol>
<li>Be very aware of the possibility of content re-ordering. Check that you have not disconnected the visual display from the document order.</li>
<li>Test using real target browsers with a local or remote Virtual Machine.</li>
<li>Don’t forget that older layout methods are still valid and useful. Try different ways to achieve patterns. Don’t be hung up on having to use Grid.</li>
<li>Know that as an experienced front-end developer you are likely to have a whole set of preconceptions about how layout works. Try to look at these new methods anew rather than forcing them back into old patterns.</li>
<li>Keep trying things out. We’re all new to this. Test your work and share what you discover.</li>
</ol>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Anselm Hannemann</author>
<title>Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive</title>
<link>https://www.smashingmagazine.com/2018/04/monthly-web-development-update-4-2018/</link>
<pubDate>Fri, 13 Apr 2018 14:30:19 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/monthly-web-development-update-4-2018/</guid>
<description>These days, it is one of the biggest challenges to think long-term. In a world where we live with devices that last only a few months or a few years maybe, where we buy stuff to throw it away only days or weeks later, the term ‘effort’ gains a new meaning.
Recently, I was reading an essay on ‘Yatnah’, ‘Effort’. I spent a lot of time outside in nature in the past weeks and created a small acre to grow some vegetables.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/monthly-web-development-update-4-2018/" />
<title>Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive</title>
</head>
<body>
<article>
<header>
<h1>Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive</h1>
<address>Anselm Hannemann</address>
<time datetime="2018-04-13T14:30:19+02:00" class="op-published">2018-04-13T14:30:19+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>These days, it is one of the biggest challenges to think long-term. In a world where we live with devices that last only a few months or a few years maybe, where we buy stuff to throw it away only days or weeks later, the term ‘effort’ gains a new meaning.</p>
<p>Recently, I was reading <a href="https://www.kinoyoga.com/yogi-assignment-yatnah-effort/">an essay on ‘Yatnah’</a>, ‘Effort’. I spent a lot of time outside in nature in the past weeks and created a small acre to grow some vegetables. I also attended a workshop to learn the craft of grafting fruit trees. When you cut a tree, you realize that our fast-living, short-term lifestyle is very different from how nature works. I grafted a tree that is supposed to grow for decades now, and if you cut a tree that has been there for forty years, it’ll take another forty to grow one that will be similarly tall.</p>
<p>I’d love that we all try to <strong>create more long-lasting work</strong>, software that works in a decade, and in order to do so, put effort into learning how we can make that happen. So long, I’ll leave you with this quote and a bunch of interesting articles.</p>
<blockquote>“In our modern world it can be tempting to throw effort away and replace it with a few phrases of positive thinking. But there is just no substitute for practice”.<br /><br />— Kino Macgregor</blockquote>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Getting the process <em>just</em> right ain't an easy task. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works really well for them. A part of the <a href="https://www.smashingmagazine.com/membership/">Smashing Membership</a>, of course.</p>
<a href="https://www.smashingmagazine.com/membership/" class="btn btn--green btn--large">
Explore features →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-scubadiving-panel.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<h3>News</h3>
<ul>
<li>The <a href="https://webkit.org/blog/8165/release-notes-for-safari-technology-preview-52/">Safari Technology Preview 52</a> removes support for all NPAPI plug-ins other than Adobe Flash and adds support for <code>preconnect</code> link headers.</li>
<li><a href="https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html">Chrome 66 Beta</a> brings the CSS Typed Object Model, Async Clipboard API, AudioWorklets, and support to use <code>calc()</code>, <code>min()</code>, and <code>max()</code> in Media Queries. Additionally, <code>select</code> and <code>textarea</code> fields now support the <code>autocomplete</code> attribute, and the <code>catch</code> clause of a <code>try</code> statement can be used without a parameter from now on.</li>
<li>iOS 11.3 is available to the public now, and, as already announced, the release <a href="https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7">brings support for Progressive Web Apps to iOS</a>. Maximiliano Firtman shares what this means, what works and what doesn’t work (yet).</li>
<li>Safari 11.1 is now available for everyone. Here is a <a href="https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/">summary of all the new WebKit features</a> it includes.</li>
</ul>
<figure><a href="https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1c8d4760-c0ee-4884-aa0c-f011014b752e/pwa-ios-opt.png" width="800" height="599" alt="Progressive Web App on iOS" /></a><figcaption><a href="https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7">Progressive Web Apps for iOS are here</a>. Full screen, offline capable, and even visible in the iPad’s dock. (<a href="https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7">Image credit</a>)</figcaption></figure>
<h3>General</h3>
<ul>
<li>Anil Dash reflects on what the web was intended to be and how today’s web differs from this: “At a time when millions are losing trust in the web’s biggest sites, it’s worth revisiting the idea that the web was supposed to be made out of countless little sites. Here’s a <a href="https://medium.com/@anildash/the-missing-building-blocks-of-the-web-3fa490ae5cbc">look at the neglected technologies that were supposed to make it possible</a>.”</li>
<li>Morten Rand-Hendriksen wrote about <a href="https://www.smashingmagazine.com/2018/03/using-ethics-in-web-design/">using ethics in web design</a> and what questions we should ask ourselves when suggesting a solution, creating a design, or a new feature. Especially when we think we’re making something ‘smart’, it’s important to put the question whether it actually helps people first.</li>
<li>A lot of protest and discussion came along with the <a href="https://www.theguardian.com/news/2018/mar/17/cambridge-analytica-facebook-influence-us-election">Facebook / Cambridge Analytica affair</a>, most of them pointing out the technological problems with Facebook’s permission model. But the crux lies in how Facebook designed their company and which ethical baseline they set. If we don’t want something like this to happen again, <a href="https://medium.com/@helloanselm/you-design-your-service-bc75be48182b">it’s upon us to design the service we want</a>.</li>
<li>Brendan Dawes shares <a href="http://brendandawes.com/blog/ihearturls">why he thinks URLs are a masterpiece</a> and a user experience by themselves.</li>
<li>Charlie Owen’s talk transcription of “<a href="https://sonniesedge.co.uk/talks/dear-developer">Dear Developer, The Web Isn’t About You</a>” is a good summary of why we as developers need to think beyond what’s good for us and consider what serves the users and how we can achieve that instead.</li>
</ul>
<h3>UI/UX</h3>
<ul>
<li>B. Kaan Kavuştuk shares his thoughts about why we won’t be able to build a perfect design or codebase on the first try, no matter how much experience we have. Instead, it’s <a href="https://www.invisionapp.com/blog/designer-perfection/">the constant small improvements that pave the way to perfection</a>.</li>
<li>Trine Falbe <a href="https://www.smashingmagazine.com/2018/03/ethical-design-practical-getting-started-guide/">introduces us to Ethical Design</a> with a practical getting-started guide. It shows alternatives and things to think about when building a business or product. It doesn’t matter much if you’re the owner, a developer, a designer or a sales person, this is about serving users and setting the ground for real and sustainable trust.</li>
<li>Josh Lovejoy shares his <a href="https://design.google/library/fair-not-default/">learnings from working on inclusive tech solutions</a> and why it takes more than good intention to create fair, inclusive technology. This article goes into depth of why human judgment is very difficult and often based on bias, and why it isn’t easy to design and develop algorithms that treat different people equally because of this.</li>
<li>The HSB (Hue, Saturation, Brightness) color system isn’t especially new, but a lot of people still don’t understand its advantages. Erik D. Kennedy <a href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">explains its principles and advantages</a> step-by-step.</li>
<li>While there’s more discussion about inclusive design these days, it’s often seen under the accessibility hat or as technical decisions. Robert del Prado now shares <a href="https://www.invisionapp.com/blog/design-inclusive/">how important inclusive design thinking is</a> and why it’s much more about the generic user than some specific people with specific disabilities. Inclusive design brings people together, regardless of who they are, where they live, and what they can afford. And isn’t it the goal of every product to be successful by acquiring as many people as possible? Maybe we need to discuss this with marketing people as well.</li>
<li>Anton Lovchikov shares ways to <a href="https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0">improve optical adjustments in components</a>. It’s an interesting study on how very small changes can make quite a difference.</li>
</ul>
<figure><a href="https://design.google/library/fair-not-default/"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fab9d09d-a5f2-429e-894a-644725ae13aa/fair-is-not-the-default-opt.png" width="800" height="450" alt="Fair Is Not The Default" /></a><figcaption>Afraid or angry? Which emotion we think the baby is showing depends on whether we think it’s a girl or a boy. Josh Lovejoy explains <a href="https://design.google/library/fair-not-default/">how personal bias and judgments like this one lead to unfair products</a>. (<a href="https://design.google/library/fair-not-default/">Image credit</a>)</figcaption></figure>
<h3>Tooling</h3>
<ul>
<li>Brian Schrader found an unknown feature in Git which is very helpful to test ideas quickly: <a href="https://brianschrader.com/archive/gits-hidden-feature-notes/">Git Notes</a> lets us add, remove, or read notes attached to objects, without touching the objects themselves and without needing to commit the current state.</li>
<li>For many projects, I prefer to use npm scripts over calling gulp or direct webpack tasks. Michael Kühnel <a href="http://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html">shares some useful tricks for npm scripts</a>, including how to allow CLI option parameters or how to watch tasks and alert notices on error.</li>
<li>Anton Sten explains why <a href="https://www.antonsten.com/newtools/">new tools don’t always equal productivity</a>. We all love new design tools, and new ones such as Sketch, Figma, Xd, or Invision Studio keep popping up. But despite these tools solving a lot of common problems and making some things easier, productivity is mostly about what works for your problem and not what is newest. If you need to create a static mockup and Photoshop is what you know best, why not use it?</li>
<li>There’s a <a href="https://blog.cloudflare.com/announcing-1111/">new, fast DNS service available by Cloudflare</a>. Finally, a better alternative to the much used Google DNS servers, it is available under <code>1.1.1.1</code>. The new DNS is the fastest, and probably one of the most secure ones, too, out there. Cloudflare put a lot of effort into encrypting the service and partnering up with Mozilla to make DNS over HTTPS work to close a big privacy gap that until now leaked all your browsing data to the DNS provider.</li>
<li>I heard a lot about iOS machine learning already, but despite the interesting fact that they’re able to do this on the device without sending everything to a cloud, I haven’t found out how to make use of this for apps, yet. Luckily, Manu Rink put together a nice guide in which she explains <a href="https://medium.com/@codeprincess/machine-learning-in-ios-for-the-noob-6c2cdd04b00b">machine learning in iOS for beginners</a>.</li>
<li>There’s great news for the Git GUI fans: <a href="https://www.git-tower.com/blog/tower-public-beta-2018-whats-new">Tower now offers a new beta version</a> that includes pull request support, interactive rebase workflows, quick actions, reflog, and search. An amazing update that makes working with the software much faster than before, and even for me as a command line lover it’s a nice option.</li>
</ul>
<figure><a href="https://medium.com/@codeprincess/machine-learning-in-ios-for-the-noob-6c2cdd04b00b"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/70fc9a84-5a86-4791-ba2a-529f46ddbd60/machine-learning-diy-opt.png" width="800" height="674" alt="Machine Learning In iOS For The Noob" /></a><figcaption>Manu Rink shows <a href="https://medium.com/@codeprincess/machine-learning-in-ios-for-the-noob-6c2cdd04b00b">how machine learning in iOS works</a> by building an offline handwritten text recognition. (<a href="https://medium.com/@codeprincess/machine-learning-in-ios-for-the-noob-6c2cdd04b00b">Image credit</a>)</figcaption></figure>
<h3>Security</h3>
<ul>
<li>HTTP Strict Transport Security (HSTS), especially with preloading, has long been considered one of the best security features to ensure that a browser should connect only securely to a hostname. However, advertisers have found a way to track users with HSTS and using it as a persistent cross-site identifier (known as “super cookie”). <a href="https://webkit.org/blog/8146/protecting-against-hsts-abuse/">The WebKit developers reacted now</a>, and in order to protect the privacy of their users, they weakened the reliability of HSTS by limiting the hostname scope and ignoring an HSTS state for subresource requests to blocked domains.</li>
<li>PagerDuty just published an <a href="https://sudo.pagerduty.com/for_everyone/">open-source version of their internal security training material</a>, full of interesting and easy to understand explanations about common security issues and strategies. This is especially useful as you can give it to people without technical experience.</li>
<li>Christoph Rumpel shares how he found <a href="https://christoph-rumpel.com/2018/03/content-security-policy-hash-algorithm-and-turbolinks">a way to use his Content Security Policy with the Laravel Response Caching package</a>.</li>
<li>While Argon2 is the current best practice algorithm to use for hashing (passwords, for example), there are a couple of things developers need to prepare for. For example, <a href="https://dev.to/justyntemme/how-to-dos-yourself-with-argon2-20a4">it’s easy to DOS yourself using Argon2</a>, so you need to rate limit queries.</li>
<li>James Fisher shares an interesting way to <a href="https://jameshfisher.com/2018/04/07/the-dots-do-matter-how-to-scam-a-gmail-user.html">scam Gmail users, as demonstrated at the example of Netflix</a>.</li>
</ul>
<h3>Web Performance</h3>
<ul>
<li>This week, a discussion popped up on whether the technique of <a href="https://www.filamentgroup.com/lab/compressive-images.html">serving compressive images</a> is still a good idea. Tim Kadlec took it as a trigger to revisit it. He now concludes that <a href="https://timkadlec.com/remembers/2018-03-22-compressive-images-revisited/">we should not use the compressive image technique anymore</a> because of its big memory footprint and rely on new responsive image technologies such as the <code><picture></code> element or <code>srcset</code> and <code>sizes</code> attributes instead.</li>
<li>Eric Portis shares the under-the-hood principles of the <code>w</code> descriptors and <code>sizes</code> attribute for images. A pretty technical but revealing post that makes you <a href="https://beta.observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood">finally understand the magic behind these new responsive image attributes</a>.</li>
<li>Tim Oxley shares <a href="http://blog.timoxley.com/post/47041269194/avoid-else-return-early">why he prefers to return early and avoid <code>else</code></a> wherever possible. This is something I’ve been doing at the beginning of my career, then lost at some point, but returned to it again recently. Especially the reduced complexity and simpler logic in functions is a key advantage for me here.</li>
<li>Jeremy Wagner shares best practices on <a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/">how to build a lazy loading mechanism for images and videos</a>. It’s definitely not the quickest solution but the resource shares how to build the best experience and performance based on the latest technologies available in browsers.</li>
</ul>
<h3>Accessibility</h3>
<ul>
<li>Marcy Sutton explains <a href="https://www.deque.com/blog/axe-3-0-has-arrived/">what’s new in Axe 3.0</a> which now supports Shadow DOM and which you can run in your automated test suite.</li>
<li>Patrick H. Laucke shares <a href="https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/">what the new <code>:focus-visible</code> CSS pseudo-selector is about</a> and how we need to write it to ensure backwards compatibility with browsers that don’t support it yet.</li>
<li>Marco Zehe introduces us to the <a href="https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/">new Accessibility Inspector in Firefox Developer Tools</a>. This is great news and helps make inspecting accessibility issues way easier than it used to be.</li>
</ul>
<h3>CSS</h3>
<ul>
<li>Amber Wilson shares some insights into what it feels like to be thrown into a complex project in order to do the styling there. She rightly says that “<a href="https://amberwilson.co.uk/blog/nobody-said-css-is-easy/">nobody said CSS is easy</a>” and expresses how important it is that we as developers face inconvenient situations in order to grow our knowledge.</li>
<li>Ana Tudor is known for her special CSS skills. Now she explores and describes how we can achieve <a href="https://css-tricks.com/scooped-corners-in-2018/">scooped corners in CSS</a> with some clever tricks.</li>
</ul>
<figure><a href="https://css-tricks.com/scooped-corners-in-2018/"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8041c6f9-607a-4ac7-b09d-5141e5469d1f/scooped-corners-opt.png" width="800" height="318" alt="Scooped Corners" /></a><figcaption>Scooped corners? Ana Tudor shows <a href="https://css-tricks.com/scooped-corners-in-2018/">how to do it</a>. (<a href="https://css-tricks.com/scooped-corners-in-2018/">Image credit</a>)</figcaption></figure>
<h3>JavaScript</h3>
<ul>
<li><a href="https://webkit.org/blog/8170/clipboard-api-improvements/">WebKit got an upgrade for the Clipboard API</a>, and the team gives some very interesting insights into how it works and how Safari will handle some of the common challenges with clipboard data (e.g. images).</li>
<li>If you work with key value stores that live only in the frontend, <a href="https://github.com/jakearchibald/idb-keyval">IDB-Keyval</a> is a great lightweight library that simplifies working with IndexedDB and localStorage.</li>
<li>Ever wanted to create graphics from your data with a hand-drawn, sketchy look on a website? <a href="http://roughjs.com/">Rough.js</a> lets you do just that. It’s usually Canvas-based (for better performance and less data) but can also draw SVG paths.</li>
<li>If you need a drag-and-drop reorder module, there’s a smooth and accessible solution available now: <a href="https://github.com/schne324/dragon-drop">dragon-drop</a>.</li>
<li>For many years, we could only get CSS values in their computed value and even that wasn’t flexible or nice to work with. But now CSS has a proper object-based API for working with values in JavaScript: the <a href="https://developers.google.com/web/updates/2018/03/cssom">CSS Typed Object Model</a>. It’s only available in the upcoming Chrome 66 yet but definitely a promising feature I’d love to use in my code soon.</li>
<li>The React.js documentation now has an extra section that explains how to easily and <a href="https://reactjs.org/docs/accessibility.html#programmatically-managing-focus">programmatically manage focus states to ensure your UI is accessible</a>.</li>
<li>James Milner shares how we can <a href="https://www.loxodrome.io/post/cancelling-requests/">use abortable fetch to cancel requests</a>.</li>
<li>There are a few articles about Web Push Notifications out there already, but Oleksii Rudenko’s <a href="https://60devs.com/getting-started-with-web-push-notifications.html">getting-started guide</a> is a great primer that explains the principles very well.</li>
<li>In the past years, we got a lot of new features on the JavaScript platform. And since it’s hard to remember all the new stuff, Raja Rao DV summed up <a href="https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e">“Everything new in ECMAScript 2016, 2017, and 2018”</a>.</li>
</ul>
<h3>Work & Life</h3>
<ul>
<li>To raise awareness for how common such situations are for all of us, James Bennett shares an embarrassing situation <a href="https://www.b-list.org/weblog/2018/mar/20/mistakes/">where he made a simple mistake that took him a long time to find out</a>. It’s not just me making mistakes, it’s not just you, and not just James — all of us make mistakes, and as embarrassing as they seem to be in that particular situation, there’s nothing to feel bad about.</li>
<li>Adam Blanchard says “<a href="http://adamblanchard.co.uk/blog/2016/people-are-machines/">People are machines. We need maintenance, too.</a>” and creates a comparison for engineers to understand why we need to take care of ourselves and also why we need people who take care of us. This is an insight into what People Engineers do, and why it’s so important for companies to hire such people to ensure a team is healthy.</li>
<li>If there’s one thing we don’t talk much about in the web industry, it’s retirement. Jan Chipchase now wrote <a href="https://medium.com/studio-d/on-retirement-c4200ad6a9b2">a lot of interesting thoughts all about retirement</a>.</li>
<li>Rebecca Downes shares some <a href="https://medium.com/@beccadownes/remote-teams-45038339ac68">insights into her PhD on remote teams</a>, revealing under which circumstances remote teams are great and under which they’re not.</li>
</ul>
<figure><a href="http://adamblanchard.co.uk/blog/2016/people-are-machines/"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe4613f1-5e47-4c6d-b5ad-405ca7ced402/people-engineer-opt.png" width="800" height="390" alt="What would people engineers do" /></a><figcaption>People need maintenance, too. That’s where the <a href="http://adamblanchard.co.uk/blog/2016/people-are-machines/">People Engineer</a> comes in. (<a href="http://adamblanchard.co.uk/blog/2016/people-are-machines/">Image credit</a>)</figcaption></figure>
<h3>Going Beyond…</h3>
<ul>
<li>Now that we discuss the problems of centralized services like Facebook and Google, decentralization is seen as the savior of the independent web. But I’m sure that <a href="https://medium.com/@helloanselm/decentralized-wont-fix-unethical-behavior-5d20847cc608">if we don’t try to solve the underlying humanitarian issue with technology, nothing will change</a>.</li>
<li>You might have read the news about the first fatal crash with a self-driving car. A sad milestone that shows <a href="https://www.theguardian.com/technology/2018/mar/22/self-driving-car-uber-death-woman-failure-fatal-crash-arizona">how unreliable this technology can be</a> and how far away we still are from being able to rely on such systems.</li>
<li>A decade ago, smart devices promised to change the way we think and interact, and they have – but not by making us smarter. Eric Andrew-Gee explores the scientific <a href="https://www.theglobeandmail.com/technology/your-smartphone-is-making-you-stupid/article37511900/">evidence that digital distraction is damaging our minds</a>.</li>
<li>Fred Pearce wrote about <a href="https://e360.yale.edu/features/energy-hogs-can-huge-data-centers-be-made-more-efficient">how we can make the world’s largest data centers more efficient</a>. If you wonder why this would be the desired goal, it’s important to know that these data centers are responsible for 3% of the overall global CO2 emissions — as much as the airline industry.</li>
<li>“<a href="https://www.engadget.com/2018/04/11/coal-power-plant-reopened-cryptocurrency-miners/">A disused coal power station will reopen to solely power crypto</a> currencies.” I have no additional words for this.</li>
</ul>
<p>We hope you enjoyed this Web Development Update. The next one is scheduled for Friday, May 18th. Stay tuned.</p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(cm)</span>
</div>
</div>
<div id="sponsors-article-end" data-impression="true" class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Nils Schütte</author>
<title>Automating Your Feature Testing With Selenium WebDriver</title>
<link>https://www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/</link>
<pubDate>Thu, 12 Apr 2018 12:45:54 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/</guid>
<description>This article is for web developers who wish to spend less time testing the front end of their web applications but still want to be confident that every feature works fine. It will save you time by automating repetitive online tasks with Selenium WebDriver. You will find a step-by-step example for automating and testing the login function of WordPress, but you can also adapt the example for any other login form.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/" />
<title>Automating Your Feature Testing With Selenium WebDriver</title>
</head>
<body>
<article>
<header>
<h1>Automating Your Feature Testing With Selenium WebDriver</h1>
<address>Nils Schütte</address>
<time datetime="2018-04-12T12:45:54+02:00" class="op-published">2018-04-12T12:45:54+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>This article is for web developers who wish to spend less time testing the front end of their web applications but still want to be confident that every feature works fine. It will save you time by automating repetitive online tasks with Selenium WebDriver. You will find a step-by-step example for automating and testing the login function of WordPress, but you can also adapt the example for any other login form.</p>
<h3 id="what-is-selenium-and-how-can-it-help-you">What Is Selenium And How Can It Help You?</h3>
<p>Selenium is a framework for the automated testing of web applications. Using Selenium, you can basically automate every task in your browser as if a real person were to execute the task. The interface used to send commands to the different browsers is called Selenium WebDriver. Implementations of this interface are available for every major browser, including Mozilla Firefox, Google Chrome and Internet Explorer.</p>
<h3 id="automating-your-feature-testing-with-selenium-webdriver">Automating Your Feature Testing With Selenium WebDriver</h3>
<p>Which type of web developer are you? Are you the disciplined type who tests all key features of your web application after each deployment. If so, you are probably annoyed by how much time this repetitive testing consumes. Or are you the type who just doesn’t bother with testing key features and always thinks, “I should test more, but I’d rather develop new stuff.” If so, you probably only find bugs by chance or when your client or boss complains about them.</p>
<p>I have been working for a well-known online retailer in Germany for quite a while, and I always belonged to the second category: It was so exciting to think of new features for the online shop, and I didn’t like at all going over all of the previous features again after each new software deployment. So, the strategy was more or less to hope that all key features would work.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Nope, we can't do any magic tricks, but we have articles, <a href="https://www.smashingmagazine.com/books">books</a> and <a href="https://www.smashingmagazine.com/smashing-tv/">webinars</a> featuring techniques we all can use to improve our work. <a href="https://www.smashingmagazine.com/membership/?utm_medium=panel">Smashing Members</a> get a seasoned selection of magic front-end tricks — e.g. <strong>live designing sessions</strong> and perf audits, too. <em>Just sayin'</em>! ;-)</p>
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="btn btn--green btn--large">
Explore Smashing Wizardry →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-wizard.svg" alt="Smashing Cat, just preparing to do some magic stuff." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>One day, we had a serious drop in our conversion rate and started digging in our web analytics tools to find the source of this drop. It took quite a while before we found out that our checkout did not work properly since the previous software deployment.</p>
<p>This was the day when I started to do some research about automating our testing process of web applications, and I stumbled upon Selenium and its WebDriver. Selenium is basically a framework that allows you to automate web browsers. WebDriver is the name of the key interface that allows you to send commands to all major browsers (mobile and desktop) and work with them as a real user would.</p>
<h3 id="preparing-the-first-test-with-selenium-webdriver">Preparing The First Test With Selenium WebDriver</h3>
<p>First, I was a little skeptical of whether Selenium would suit my needs because the framework is most commonly used in Java, and I am certainly not a Java expert. Later, I learned that being a Java expert is not necessary to take advantage of the power of the Selenium framework.</p>
<p>As a simple first test, I tested the login of one of my WordPress projects. Why WordPress? Just because using the WordPress login form is an example that everybody can follow more easily than if I were to refer to some custom web application.</p>
<p>What do you need to start using Selenium WebDriver? Because I decided to use the most common implementation of Selenium in Java, I needed to set up my little Java environment.</p>
<p>If you want to follow my example, you can use the Java environment of your choice. If you haven’t set one up yet, I suggest <a href="https://www.eclipse.org/downloads/eclipse-packages/?show_instructions=TRUE">installing Eclipse</a> and making sure you are able to run a simple <a href="http://www.java-made-easy.com/java-hello-world.html">“Hello world” script in Java</a>.</p>
<p>Because I wanted to test the login in Chrome, I made sure that the Chrome browser was already installed on my machine. That’s all I did in preparation.</p>
<h3 id="downloading-the-chromedriver">Downloading The ChromeDriver</h3>
<p>All major browsers provide their own implementation of the WebDriver interface. Because I wanted to test the WordPress login in Chrome, I needed to get the WebDriver implementation of Chrome: <a href="https://sites.google.com/a/chromium.org/chromedriver/downloads">ChromeDriver.</a></p>
<p>I extracted the ZIP archive and stored the executable file <code>chromedriver.exe</code> in a location that I could remember for later.</p>
<h3 id="setting-up-our-selenium-project-in-eclipse">Setting Up Our Selenium Project In Eclipse</h3>
<p>The steps I took in Eclipse are probably pretty basic to someone who works a lot with Java and Eclipse. But for those like me, who are not so familiar with this, I will go over the individual steps:</p>
<ol>
<li>Open Eclipse.</li>
<li>Click the "New" icon.<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27a60e0f-79b5-4326-a731-ea25aa9314f5/01-new-java-project.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27a60e0f-79b5-4326-a731-ea25aa9314f5/01-new-java-project.jpg" width="323" height="88" alt="Creating a new project in Eclipse" /></a><figcaption>Creating a new project in Eclipse</figcaption></figure>
</li>
<li>Choose the wizard to create a new "Java Project," and click “Next.”<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ad84e3d-b76c-405b-b477-ff1ddb32d939/02-new-java-project.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5ad84e3d-b76c-405b-b477-ff1ddb32d939/02-new-java-project.jpg" width="541" height="514" alt="Chosing the java-project wizard" /></a><figcaption>Choose the java-project wizard.</figcaption></figure>
</li>
<li>Give your project a name, and click "Finish."<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85bb5f73-4f57-4f0f-9835-ef259edb6d3e/03-new-java-project.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/85bb5f73-4f57-4f0f-9835-ef259edb6d3e/03-new-java-project.jpg" width="574" height="729" alt="Eclipse project wizard" /></a><figcaption>The eclipse project wizard</figcaption></figure>
</li>
<li>Now you should see your new Java project on the left side of the screen.<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4bb325ba-172c-4dae-b54f-a2f4cff0ea46/04-new-java-project.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4bb325ba-172c-4dae-b54f-a2f4cff0ea46/04-new-java-project.jpg" width="324" height="85" alt="Java project successfully created" /></a><figcaption>We successfully created a project to run the Selenium WebDriver.</figcaption></figure>
</li>
</ol>
<h3 id="adding-the-selenium-library-to-our-project">Adding The Selenium Library To Our Project</h3>
<p>Now we have our Java project, but Selenium is still missing. So, next, we need to bring the Selenium framework into our Java project. Here are the steps I took:</p>
<ol>
<li>Download the <a href="http://www.seleniumhq.org/download/">latest version</a> of the Java Selenium library.<br/>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc225835-721b-4089-97d3-d038d97dff59/05-download-selenium.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc225835-721b-4089-97d3-d038d97dff59/05-download-selenium.jpg" width="571" height="134" alt="Downloading the Selenium library" /></a><figcaption>Download the Selenium library.</figcaption></figure>
</li>
<li>Extract the archive, and store the folder in a place you can remember easily.</li>
<li>Go back to Eclipse, and go to "Project" → “Properties.”<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20c0b2e2-037f-4d75-939e-3c5bc1dc40d1/06-adding-selenium-library.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20c0b2e2-037f-4d75-939e-3c5bc1dc40d1/06-adding-selenium-library.jpg" width="228" height="248" alt="Eclipse Properties" /></a><figcaption>Go to properties to integrate the Selenium WebDriver in you project.</figcaption></figure>
</li>
<li>In the dialog, go to "Java Build Path" and then to register “Libraries.”</li>
<li>Click on "Add External JARs."<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e28f1b6f-f03e-457b-8ca8-96bfc14ca49c/07-adding-selenium-library.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e28f1b6f-f03e-457b-8ca8-96bfc14ca49c/07-adding-selenium-library.jpg" width="802" height="558" alt="Adding the Selenium lib to your Java build path." /></a><figcaption> Add the Selenium lib to your Java build path.</figcaption></figure>
</li>
<li>Navigate to the just downloaded folder with the Selenium library. Highlight all <code>.jar</code> files and click "Open."<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d3f312-e05d-497e-baa3-f490bdb0e514/08-adding-selenium-library.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d3f312-e05d-497e-baa3-f490bdb0e514/08-adding-selenium-library.jpg" width="586" height="150" alt="Selecting the correct files of the Selenium lib." /></a><figcaption>Select all files of the lib to add to your project.</figcaption></figure>
</li>
<li>Repeat this for all <code>.jar</code> files in the subfolder <code>libs</code> as well.</li>
<li>Eventually, you should see all <code>.jar</code> files in the libraries of your project:<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a5d2290b-7eeb-45d3-ab97-078fc040f881/09-adding-selenium-library.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a5d2290b-7eeb-45d3-ab97-078fc040f881/09-adding-selenium-library.jpg" width="756" height="562" alt="Selenium WebDriver framework successfully integrated into your project" /></a><figcaption>The Selenium WebDriver framework has now been successfully integrated into your project!</figcaption></figure>
</li>
</ol>
<p>That’s it! Everything we’ve done until now is a one-time task. You could use this project now for all of your different tests, and you wouldn’t need to do the whole setup process for every test case again. Kind of neat, isn’t it?</p>
<h3 id="creating-our-testing-class-and-letting-it-open-the-chrome-browser">Creating Our Testing Class And Letting It Open the Chrome Browser</h3>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>Now we have our Selenium project, but what next? To see whether it works at all, I wanted to try something really simple, like just opening my Chrome browser.</p>
<p>To do this, I needed to create a new Java class from which I could execute my first test case. Into this executable class, I copied a few Java code lines, and believe it or not, it worked! Magically, the Chrome browser opened and, after a few seconds, closed all by itself.</p>
<p>Try it yourself:</p>
<ol>
<li>Click on the "New" button again (while you are in your new project’s folder).<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba998ff3-4dfe-45d5-8c72-ed1a7ffd0554/10-new-class.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ba998ff3-4dfe-45d5-8c72-ed1a7ffd0554/10-new-class.jpg" width="323" height="88" alt="New class in eclipse" /></a><figcaption>Create a new class to run the Selenium WebDriver.</figcaption></figure>
</li>
<li>Choose the "Class" wizard, and click “Next.”<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9e6a897-6bfe-40dd-a9f7-103435bc8ef7/11-new-class.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9e6a897-6bfe-40dd-a9f7-103435bc8ef7/11-new-class.jpg" width="540" height="515" alt="New class wizard in eclipse" /></a><figcaption>Choose the Java class wizard to create a new class.</figcaption></figure>
</li>
<li>Name your class (for example, "RunTest"), and click “Finish.”<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd8acc1a-a9cb-4b81-924a-0aa692e76039/12-new-class.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fd8acc1a-a9cb-4b81-924a-0aa692e76039/12-new-class.jpg" width="551" height="656" alt="Eclipse Java Class wizard" /></a><figcaption>The eclipse Java Class wizard.</figcaption></figure>
</li>
<li>Replace all code in your new class with the following code. The only thing you need to change is the path to <code>chromedriver.exe</code> on your computer:<br />
<pre class="break-out"><code class="language-bash">import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
/**
* @author Nils Schuette via frontendtest.org
*/
public class RunTest {
static WebDriver webDriver;
/**
* @param args
* @throws InterruptedException
*/
public static void main(final String[] args) throws InterruptedException {
// Telling the system where to find the chrome driver
System.setProperty(
"webdriver.chrome.driver",
"C:/PATH/TO/chromedriver.exe");
// Open the Chrome browser
webDriver = new ChromeDriver();
// Waiting a bit before closing
Thread.sleep(7000);
// Closing the browser and WebDriver
webDriver.close();
webDriver.quit();
}
}
</code></pre></li>
<li>Save your file, and click on the play button to run your code.<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/100de14d-8beb-48f7-b19c-f7a66ca4cb05/13-run-test.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/100de14d-8beb-48f7-b19c-f7a66ca4cb05/13-run-test.jpg" width="693" height="254" alt="Run Eclipse project" /></a><figcaption>Running your first Selenium WebDriver project.</figcaption></figure>
</li>
<li>If you have done everything correctly, the code should open a new instance of the Chrome browser and close it shortly thereafter.<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc7ed40e-dcdb-4c83-83f1-1d90e893eacb/14-open-chrome-browser.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc7ed40e-dcdb-4c83-83f1-1d90e893eacb/14-open-chrome-browser.jpg" width="1207" height="780" alt="Chrome Browser blank window" /></a><figcaption>The Chrome Browser opens itself magically. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc7ed40e-dcdb-4c83-83f1-1d90e893eacb/14-open-chrome-browser.jpg">Large preview</a>)</figcaption></figure>
</li>
</ol>
<h3 id="testing-the-wordpress-admin-login">Testing The WordPress Admin Login</h3>
<p>Now I was optimistic that I could automate my first little feature test. I wanted the browser to navigate to one of my WordPress projects, login to the admin area and verify that the login was successful. So, what commands did I need to look up?</p>
<ol>
<li>Navigate to the login form,</li>
<li>Locate the input fields,</li>
<li>Type the username and password into the input fields,</li>
<li>Hit the login button,</li>
<li>Compare the current page’s headline to see if the login was successful.</li>
</ol>
<p>Again, after I had done all the necessary updates to my code and clicked on the run button in Eclipse, my browser started to magically work itself through the WordPress login. I successfully ran my first automated website test!</p>
<p>If you want to try this yourself, replace all of the code of your Java class with the following. I will go through the code in detail afterwards. Before executing the code, you must replace four values with your own:</p>
<ol>
<li><p>The location of your <code>chromedriver.exe</code> file (as above),</p></li>
<li><p>The URL of the WordPress admin account that you want to test,</p></li>
<li><p>The WordPress username,</p></li>
<li><p>The WordPress password.</p></li>
</ol>
<p>Then, save and let it run again. It will open Chrome, navigate to the login of your WordPress website, login and check whether the <code>h1</code> headline of the current page is “Dashboard.”</p>
<pre class="break-out"><code class="language-bash">import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
/**
* @author Nils Schuette via frontendtest.org
*/
public class RunTest {
static WebDriver webDriver;
/**
* @param args
* @throws InterruptedException
*/
public static void main(final String[] args) throws InterruptedException {
// Telling the system where to find the chrome driver
System.setProperty(
"webdriver.chrome.driver",
"C:/PATH/TO/chromedriver.exe");
// Open the Chrome browser
webDriver = new ChromeDriver();
// Maximize the browser window
webDriver.manage().window().maximize();
if (testWordpresslogin()) {
System.out.println("Test Wordpress Login: Passed");
} else {
System.out.println("Test Wordpress Login: Failed");
}
// Close the browser and WebDriver
webDriver.close();
webDriver.quit();
}
private static boolean testWordpresslogin() {
try {
// Open google.com
webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");
// Type in the username
webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");
// Type in the password
webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");
// Click the Submit button
webDriver.findElement(By.id("wp-submit")).click();
// Wait a little bit (7000 milliseconds)
Thread.sleep(7000);
// Check whether the h1 equals “Dashboard”
if (webDriver.findElement(By.tagName("h1")).getText()
.equals("Dashboard")) {
return true;
} else {
return false;
}
// If anything goes wrong, return false.
} catch (final Exception e) {
System.out.println(e.getClass().toString());
return false;
}
}
}
</code></pre>
<p>If you have done everything correctly, your output in the Eclipse console should look something like this:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25a166ee-672b-46ae-976b-055a78de2256/15-console-output.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25a166ee-672b-46ae-976b-055a78de2256/15-console-output.jpg" width="829" height="174" alt="Eclipse console test result." /></a><figcaption>The Eclipse console states that our first test has passed. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/25a166ee-672b-46ae-976b-055a78de2256/15-console-output.jpg">Large preview</a>)</figcaption></figure>
<h3 id="understanding-the-code">Understanding The Code</h3>
<p>Because you are probably a web developer and have at least a basic understanding of other programming languages, I am sure you already grasp the basic idea of the code: We have created a separate method, <code>testWordpressLogin</code>, for the specific test case that is called from our main method.</p>
<p>Depending on whether the method returns true or false, you will get an output in your console telling you whether this specific test passed or failed.</p>
<p>This is not necessary, but this way you can easily add many more test cases to this class and still have readable code.</p>
<p>Now, step by step, here is what happens in our little program:</p>
<ol>
<li>First, we tell our program where it can find the specific WebDriver for Chrome.<br />
<pre class="break-out"><code class="language-bash">System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");</code></pre>
</li>
<li>We open the Chrome browser and maximize the browser window.<br />
<pre class="break-out"><code class="language-bash">webDriver = new ChromeDriver();
webDriver.manage().window().maximize();</code></pre>
</li>
<li>This is where we jump into our submethod and check whether it returns true or false.<br />
<pre class="break-out"><code class="language-bash">if (testWordpresslogin()) …</code></pre>
</li>
<li>The following part in our submethod might not be intuitive to understand:<br />The <code>try{…}catch{…}</code> blocks. If everything goes as expected, only the code in <code>try{…}</code> will be executed, but if anything goes wrong while executing <code>try{…}</code>, then the execution continuous in <code>catch{}</code>. Whenever you try to locate an element with <code>findElement</code> and the browser is not able to locate this element, it will throw an exception and execute the code in <code>catch{…}</code>. In my example, the test will be marked as "failed" whenever something goes wrong and the <code>catch{}</code> is executed.</li>
<li>In the submethod, we start by navigating to our WordPress admin area and locating the fields for the username and the password by looking for their IDs. Also, we type the given values in these fields.<br />
<pre class="break-out"><code class="language-bash">webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");
webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");
webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");</code></pre>
<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b01760d-dee9-42b8-9178-6f7c10a80549/16-wordpress-admin-login.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b01760d-dee9-42b8-9178-6f7c10a80549/16-wordpress-admin-login.jpg" width="460" height="454" alt="Wordpress login form" /></a><figcaption>Selenium fills out our login form</figcaption></figure>
</li>
<li>After filling in the login form, we locate the submit button by its ID and click it.<br />
<pre class="break-out"><code class="language-bash">webDriver.findElement(By.id("wp-submit")).click();</code></pre>
</li>
<li>In order to follow the test visually, I include a 7-second pause here (7000 milliseconds = 7 seconds).<br />
<pre class="break-out"><code class="language-bash">Thread.sleep(7000);</code></pre>
</li>
<li>If the login is successful, the <code>h1</code> headline of the current page should now be "Dashboard," referring to the WordPress admin area. Because the <code>h1</code> headline should exist only once on every page, I have used the tag name here to locate the element. In most other cases, the tag name is not a good locator because an HTML tag name is rarely unique on a web page. After locating the <code>h1</code>, we extract the text of the element with <code>getText()</code> and check whether it is equal to the string “Dashboard.” If the login is not successful, we would not find “Dashboard” as the current <code>h1</code>. Therefore, I’ve decided to use the <code>h1</code> to check whether the login is successful.<br />
<pre class="break-out"><code class="language-javascript">if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard"))
{
return true;
} else {
return false;
}
</code></pre>
<br />
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8a5943f-3f76-4387-8805-d2f5f81dc260/17-wordpress-dashboard.jpg"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8a5943f-3f76-4387-8805-d2f5f81dc260/17-wordpress-dashboard.jpg" width="1096" height="346" alt="Wordpress Dashboard" /></a><figcaption>Letting the WebDriver check, whether we have arrived on the Dashboard: Test passed! (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8a5943f-3f76-4387-8805-d2f5f81dc260/17-wordpress-dashboard.jpg">Large preview</a>)</figcaption></figure>
</li>
<li>If anything has gone wrong in the previous part of the submethod, the program would have jumped directly to the following part. The <code>catch</code> block will print the type of exception that happened to the console and afterwards return <code>false</code> to the main method.<br />
<pre class="break-out"><code class="language-javascript">catch (final Exception e) {
System.out.println(e.getClass().toString());
return false;
}</code></pre>
</li>
</ol>
<h3 id="adapting-the-test-case">Adapting The Test Case</h3>
<p>This is where it gets interesting if you want to adapt and add test cases of your own. You can see that we always call methods of the <code>webDriver</code> object to do something with the Chrome browser.</p>
<p>First, we maximize the window:</p>
<pre class="break-out"><code class="language-bash">webDriver.manage().window().maximize();</code></pre>
<p>Then, in a separate method, we navigate to our WordPress admin area:</p>
<pre class="break-out"><code class="language-bash">webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");</code></pre>
<p>There are other methods of the <code>webDriver</code> object we can use. Besides the two above, you will probably use this one a lot:</p>
<pre class="break-out"><code class="language-bash">webDriver.findElement(By. …)</code></pre>
<p>The <code>findElement</code> method helps us find different elements in the DOM. There are different options to find elements:</p>
<ul>
<li><code>By.id</code></li>
<li><code>By.cssSelector</code></li>
<li><code>By.className</code></li>
<li><code>By.linkText</code></li>
<li><code>By.name</code></li>
<li><code>By.xpath</code></li>
</ul>
<p>If possible, I recommend using <code>By.id</code> because the ID of an element should always be unique (unlike, for example, the <code>className</code>), and it is usually not affected if the structure of your DOM changes (unlike, say, the <code>xPath</code>).</p>
<p><strong>Note</strong>: <em>You can read more about the different options for locating elements with WebDriver over <a href="http://www.seleniumhq.org/docs/03_webdriver.jsp#locating-ui-elements-webelements">here</a>.</em></p>
<p>As soon as you get ahold of an element using the <code>findElement</code> method, you can call the different available methods of the element. The most common ones are <code>sendKeys</code>, <code>click</code> and <code>getText</code>.</p>
<p>We’re using <code>sendKeys</code> to fill in the login form:</p>
<pre class="break-out"><code class="language-bash">webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");</code></pre>
<p>We have used <code>click</code> to submit the login form by clicking on the submit button:</p>
<pre class="break-out"><code class="language-bash">webDriver.findElement(By.id("wp-submit")).click();</code></pre>
<p>And <code>getText</code> has been used to check what text is in the <code>h1</code> after the submit button is clicked:</p>
<pre class="break-out"><code class="language-bash">webDriver.findElement(By.tagName("h1")).getText()</code></pre>
<p><strong>Note</strong>: <em>Be sure to check out <a href="https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html">all the available methods that you can use</a> with an element.</em></p>
<h3 id="conclusion">Conclusion</h3>
<p>Ever since I discovered the power of Selenium WebDriver, my life as a web developer has changed. I simply love it. The deeper I dive into the framework, the more possibilities I discover — running one test simultaneously in Chrome, Internet Explorer and Firefox or even on my smartphone, or taking screenshots automatically of different pages and comparing them. Today, I use Selenium WebDriver not only for testing purposes, but also to <a href="https://www.seguetech.com/use-automation-to-perform-repetitive-data-entry-tasks/">automate repetitive tasks on the web</a>. Whenever I see an opportunity to automate my work on the web, I simply copy my initial WebDriver project and adapt it to the next task.</p>
<p>If you think that Selenium WebDriver is for you, I recommend looking at <a href="https://www.seleniumhq.org/docs/">Selenium’s documentation</a> to find out about all of the possibilities of Selenium (such as <a href="https://www.seleniumhq.org/docs/07_selenium_grid.jsp">running tasks simultaneously</a> on several (mobile) devices with Selenium Grid).</p>
<p>I look forward to hearing whether you find WebDriver as useful as I do!</p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(rb, ra, al, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Lou Franco</author>
<title>Will SiriKit’s Intents Fit Your App? If So, Here’s How To Use Them</title>
<link>https://www.smashingmagazine.com/2018/04/sirikit-intents-app-guide/</link>
<pubDate>Wed, 11 Apr 2018 17:00:44 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/sirikit-intents-app-guide/</guid>
<description>Since iOS 5, Siri has helped iPhone users send messages, set reminders and look up restaurants with Apple’s apps. Starting in iOS 10, we have been able to use Siri in some of our own apps as well.
In order to use this functionality, your app must fit within Apple’s predefined Siri “domains and intents.” In this article, we’ll learn about what those are and see whether our apps can use them.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/sirikit-intents-app-guide/" />
<title>Will SiriKit’s Intents Fit Your App? If So, Here’s How To Use Them</title>
</head>
<body>
<article>
<header>
<h1>Will SiriKit’s Intents Fit Your App? If So, Here’s How To Use Them</h1>
<address>Lou Franco</address>
<time datetime="2018-04-11T17:00:44+02:00" class="op-published">2018-04-11T17:00:44+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>Since iOS 5, Siri has helped iPhone users send messages, set reminders and look up restaurants with Apple’s apps. Starting in iOS 10, we have been able to use Siri in some of our own apps as well.</p>
<p>In order to use this functionality, your app must fit within Apple’s predefined Siri “domains and intents.” In this article, we’ll learn about what those are and see whether our apps can use them. We’ll take a simple app that is a to-do list manager and learn how to add Siri support. We’ll also go through the Apple developer website’s guidelines on configuration and Swift code for a new type of extension that was introduced with SiriKit: the <em>Intents</em> extension.</p>
<p>When you get to the coding part of this article, you will need Xcode (at least version 9.x), and it would be good if you are familiar with iOS development in Swift because we’re going to add Siri to a small working app. We’ll go through the steps of setting up a extension on Apple’s developer website and of adding the Siri extension code to the app.</p>
<h3 id="hey-siri-why-do-i-need-you">“Hey Siri, Why Do I Need You?”</h3>
<p>Sometimes I use my phone while on my couch, with both hands free, and I can give the screen my full attention. Maybe I’ll text my sister to plan our mom’s birthday or reply to a question in Trello. I can see the app. I can tap the screen. I can type.</p>
<p>But I might be walking around my town, listening to a podcast, when a text comes in on my watch. My phone is in my pocket, and I can’t easily answer while walking.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Getting the process <em>just</em> right ain't an easy task. That's why we've set up <strong>'this-is-how-I-work'-sessions</strong> — with smart cookies sharing what works really well for them. A part of the <a href="https://www.smashingmagazine.com/membership/">Smashing Membership</a>, of course.</p>
<a href="https://www.smashingmagazine.com/membership/" class="btn btn--green btn--large">
Explore features →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-scubadiving-panel.svg" alt="Smashing TV, with live sessions for professional designers and developers." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>With Siri, I can hold down my headphone’s control button and say, “Text my sister that I’ll be there by two o’clock.” Siri is great when you are on the go and can’t give full attention to your phone or when the interaction is minor, but it requires several taps and a bunch of typing.</p>
<p>This is fine if I want to use Apple apps for these interactions. But some categories of apps, like messaging, have very popular alternatives. Other activities, such as booking a ride or reserving a table in a restaurant, are not even possible with Apple’s built-in apps but are perfect for Siri.</p>
<h3 id="apple-s-approach-to-voice-assistants">Apple’s Approach To Voice Assistants</h3>
<p>To enable Siri in third-party apps, Apple had to decide on a mechanism to take the sound from the user’s voice and somehow get it to the app in a way that it could fulfill the request. To make this possible, Apple requires the user to mention the app’s name in the request, but they had several options of what to do with the rest of the request.</p>
<ul>
<li><strong>It could have sent a sound file to the app.</strong><br />
The benefit of this approach is that the app could try to handle literally any request the user might have for it. Amazon or Google might have liked this approach because they already have sophisticated voice-recognition services. But most apps would not be able to handle this very easily.</li>
<li><strong>It could have turned the speech into text and sent that.</strong><br />
Because many apps don’t have sophisticated natural-language implementations, the user would usually have to stick to very particular phrases, and non-English support would be up to the app developer to implement.</li>
<li><strong>It could have asked you to provide a list of phrases that you understand.</strong><br />
This mechanism is closer to what Amazon does with Alexa (in its “skills” framework), and it enables far more uses of Alexa than SiriKit can currently handle. In an Alexa skill, you provide phrases with placeholder variables that Alexa will fill in for you. For example, “Alexa, remind me at <code>$TIME$</code> to <code>$REMINDER$</code>” — Alexa will run this phrase against what the user has said and tell you the values for <code>TIME</code> and <code>REMINDER</code>. As with the previous mechanism, the developer needs to do all of the translation, and there isn’t a lot of flexibility if the user says something slightly different.</li>
<li><strong>It could define a list of requests with parameters and send the app a structured request.</strong><br />
This is actually what Apple does, and the benefit is that it can support a variety of languages, and it does all of the work to try to understand all of the ways a user might phrase a request. The big downside is that you can only implement handlers for requests that Apple defines. This is great if you have, for example, a messaging app, but if you have a music-streaming service or a podcast player, you have no way to use SiriKit right now.</li>
</ul>
<p>Similarly, there are three ways for apps to talk back to the user: with sound, with text that gets converted, or by expressing the kind of thing you want to say and letting the system figure out the exact way to express it. The last solution (which is what Apple does) puts the burden of translation on Apple, but it gives you limited ways to use your own words to describe things.</p>
<p>The kinds of requests you can handle are defined in SiriKit’s domains and intents. An intent is a type of request that a user might make, like texting a contact or finding a photo. Each intent has a list of parameters — for example, texting requires a contact and a message.</p>
<p>A domain is just a group of related intents. Reading a text and sending a text are both in the messaging domain. Booking a ride and getting a location are in the ride-booking domain. There are domains for making VoIP calls, starting workouts, searching for photos and a few more things. SiriKit’s documentation contains a <a href="https://developer.apple.com/documentation/sirikit">full list of domains and their intents</a>.</p>
<p>A common criticism of Siri is that it seems unable to handle requests as well as Google and Alexa, and that the third-party voice ecosystem enabled by Apple’s competitors is richer.</p>
<p>I agree with those criticisms. If your app doesn’t fit within the current intents, then you can’t use SiriKit, and there’s nothing you can do. Even if your app does fit, you can’t control all of the words Siri says or understands; so, if you have a particular way of talking about things in your app, you can’t always teach that to Siri.</p>
<p>The hope of iOS developers is both that Apple will greatly expand its list of intents and that its natural language processing becomes much better. If it does that, then we will have a voice assistant that works without developers having to do translation or understand all of the ways of saying the same thing. And implementing support for structured requests is actually fairly simple to do — a lot easier than building a natural language parser.</p>
<p>Another big benefit of the intents framework is that it is not limited to Siri and voice requests. Even now, the Maps app can generate an intents-based request of your app (for example, a restaurant reservation). It does this programmatically (not from voice or natural language). If Apple allowed apps to discover each other’s exposed intents, we’d have a much better way for apps to work together, (as opposed to <a href="http://x-callback-url.com/">x-callback style URLs</a>).</p>
<p>Finally, because an intent is a structured request with parameters, there is a simple way for an app to express that parameters are missing or that it needs help distinguishing between some options. Siri can then ask follow-up questions to resolve the parameters without the app needing to conduct the conversation.</p>
<h3 id="the-ride-booking-domain">The Ride-Booking Domain</h3>
<p>To understand domains and intents, let’s look at the <a href="https://developer.apple.com/documentation/sirikit/ride_booking">ride-booking domain</a>. This is the domain that you would use to ask Siri to get you a Lyft car.</p>
<p>Apple defines how to ask for a ride and how to get information about it, but there is actually no built-in Apple app that can actually handle this request. This is one of the few domains where a SiriKit-enabled app is required.</p>
<p>You can invoke one of the intents via voice or directly from Maps. Some of the intents for this domain are:</p>
<ul>
<li><strong>Request a ride</strong><br />
Use this one to book a ride. You’ll need to provide a pick-up and drop-off location, and the app might also need to know your party’s size and what kind of ride you want. A sample phrase might be, “Book me a ride with <appname>.”</li>
<li><strong>Get the ride’s status</strong><br />
Use this intent to find out whether your request was received and to get information about the vehicle and driver, including their location. The Maps app uses this intent to show an updated image of the car as it is approaching you.</li>
<li><strong>Cancel a ride</strong><br />
Use this to cancel a ride that you have booked.</li>
</ul>
<p>For any of this intents, Siri might need to know more information. As you’ll see when we implement an intent handler, your Intents extension can tell Siri that a required parameter is missing, and Siri will prompt the user for it.</p>
<p>The fact that intents can be invoked programmatically by Maps shows how intents might enable inter-app communication in the future.</p>
<p><strong>Note</strong>: <em>You can get a <a href="https://developer.apple.com/documentation/sirikit">full list of domains and their intents</a> on Apple’s developer website. There is also a <a href="https://developer.apple.com/library/content/samplecode/IntentHandling/Introduction/Intro.html">sample Apple app with many domains and intents implemented</a>, including ride-booking.</em></p>
<h3 id="adding-lists-and-notes-domain-support-to-your-app">Adding Lists And Notes Domain Support To Your App</h3>
<p>OK, now that we understand the basics of SiriKit, let’s look at how you would go about adding support for Siri in an app that involves a lot of configuration and a class for each intent you want to handle.</p>
<p>The rest of this article consists of the detailed steps to add Siri support to an app. There are five high-level things you need to do:</p>
<ol>
<li>Prepare to add a new extension to the app by creating provisioning profiles with new entitlements for it on Apple’s developer website.</li>
<li>Configure your app (via its <code>plist</code>) to use the entitlements.</li>
<li>Use Xcode’s template to get started with some sample code.</li>
<li>Add the code to support your Siri intent.</li>
<li>Configure Siri’s vocabulary via <code>plist</code>s.</li>
</ol>
<p>Don’t worry: We’ll go through each of these, explaining extensions and entitlements along the way.</p>
<p>To focus on just the Siri parts, I’ve prepared a simple to-do list manager, List-o-Mat.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91fd25ff-fee1-4b6d-83aa-444555336b64/sirikit-intentslist-o-mat.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91fd25ff-fee1-4b6d-83aa-444555336b64/sirikit-intentslist-o-mat.gif" width="552" height="850" alt="An animated GIF showing a demo of List-o-Mat" /></a><figcaption>Making lists in List-o-Mat (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/91fd25ff-fee1-4b6d-83aa-444555336b64/sirikit-intentslist-o-mat.gif">Large preview</a>)</figcaption></figure>
<p><em>You can find the <a href="https://github.com/app-o-mat/ListOMat">full source of the sample, List-o-Mat, on GitHub</a>.</em></p>
<p>To create it, all I did was start with the Xcode Master-Detail app template and make both screens into a <code>UITableView</code>. I added a way to add and delete lists and items, and a way to check off items as done. All of the navigation is generated by the template.</p>
<p>To store the data, I used the <code>Codable</code> protocol, (<a href="https://www.smashingmagazine.com/2017/07/wwdc-2017-highlights/#swift">introduced at WWDC 2017</a>), which turns structs into JSON and saves it in a text file in the <code>documents</code> folder.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>I’ve deliberately kept the code very simple. If you have any experience with Swift and making view controllers, then you should have no problem with it.</p>
<p>Now we can go through the steps of adding SiriKit support. The high-level steps would be the same for any app and whichever domain and intents you plan to implement. We’ll mostly be dealing with Apple’s developer website, editing <code>plist</code>s and writing a bit of Swift.</p>
<p>For List-o-Mat, we’ll focus on the <a href="https://developer.apple.com/documentation/sirikit/lists_and_notes">lists and notes domain</a>, which is broadly applicable to things like note-taking apps and to-do lists.</p>
<p>In the lists and notes domain, we have the following intents that would make sense for our app.</p>
<ul>
<li>Get a list of tasks.</li>
<li>Add a new task to a list.</li>
</ul>
<p>Because the interactions with Siri actually happen outside of your app (maybe even when you app is not running), iOS uses an extension to implement this.</p>
<h3 id="the-intents-extension">The Intents Extension</h3>
<p>If you have not worked with extensions, you’ll need to know three main things:</p>
<ol>
<li>An extension is a separate process. It is delivered inside of your app’s bundle, but it runs completely on its own, with its own sandbox.</li>
<li>Your app and extension can communicate with each other by being in the same app group. The easiest way is via the group’s shared sandbox folders (so, they can read and write to the same files if you put them there).</li>
<li>Extensions require their own app IDs, profiles and entitlements.</li>
</ol>
<p>To add an extension to your app, start by logging into your <a href="https://developer.apple.com">developer account</a> and going to the “Certificates, Identifiers, & Profiles” section.</p>
<h4 id="updating-your-apple-developer-app-account-data">Updating Your Apple Developer App Account Data</h4>
<p>In our Apple developer account, the first thing we need to do is create an app group. Go to the “App Groups” section under “Identifiers” and add one.</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7eac68f-a44d-4c65-87c9-d6ee29ae148f/sirikit-intents01-create-app-group.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7eac68f-a44d-4c65-87c9-d6ee29ae148f/sirikit-intents01-create-app-group.png" width="1406" height="1126" alt="A screenshot of the Apple developer website dialog for registering an app group" /></a><figcaption>Registering an app group (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7eac68f-a44d-4c65-87c9-d6ee29ae148f/sirikit-intents01-create-app-group.png">Large preview</a>)</figcaption></figure>
<p>It must start with <code>group</code>, followed by your usual reverse domain-based identifier. Because it has a prefix, you can use your app’s identifier for the rest.</p>
<p>Then, we need to update our app’s ID to use this group and to enable Siri:</p>
<ol>
<li>Go to the “App IDs” section and click on your app’s ID;</li>
<li>Click the “Edit” button;</li>
<li>Enable app groups (if not enabled for another extension).<br />
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2a5ac93-5854-4f6a-8d48-e85de316174c/sirikit-intents02-profile-add-app-groups-siri.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2a5ac93-5854-4f6a-8d48-e85de316174c/sirikit-intents02-profile-add-app-groups-siri.png" width="709" height="252" alt="A screenshot of Apple developer website enabling app groups for an app ID" /></a><figcaption>Enable app groups (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2a5ac93-5854-4f6a-8d48-e85de316174c/sirikit-intents02-profile-add-app-groups-siri.png">Large preview</a>)</figcaption></figure>
</li>
<li>Then configure the app group by clicking the “Edit” button. Choose the app group from before.<br />
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eaa7f7d6-f64a-44ce-a3fa-4216052f39d8/sirikit-intents03-configure-app-groups.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eaa7f7d6-f64a-44ce-a3fa-4216052f39d8/sirikit-intents03-configure-app-groups.png" width="1342" height="280" alt="A screenshot of the Apple developer website dialog to set the app group name" /></a><figcaption>Set the name of the app group (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/eaa7f7d6-f64a-44ce-a3fa-4216052f39d8/sirikit-intents03-configure-app-groups.png">Large preview</a>)</figcaption></figure>
</li>
<li>Enable SiriKit.<br />
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/176bd09f-a32a-47ac-b180-6d3fe3af251e/sirikit-intents04-enable-sirikit.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/176bd09f-a32a-47ac-b180-6d3fe3af251e/sirikit-intents04-enable-sirikit.png" width="445" height="72" alt="A screenshot of SiriKit being enabled" /></a><figcaption>Enable SiriKit (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/176bd09f-a32a-47ac-b180-6d3fe3af251e/sirikit-intents04-enable-sirikit.png">Large preview</a>)</figcaption></figure>
</li>
<li>Click “Done” to save it.</li>
</ol>
<p>Now, we need to create a new app ID for our extension:</p>
<ol>
<li>In the same “App IDs” section, add a new app ID. This will be your app’s identifier, with a suffix. Do <em>not</em> use just <code>Intents</code> as a suffix because this name will become your module’s name in Swift and would then conflict with the real <code>Intents</code>.<br />
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c62157c-c75a-45ce-90ba-65cfdbf76d95/sirikit-intents05-intents-app-id.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c62157c-c75a-45ce-90ba-65cfdbf76d95/sirikit-intents05-intents-app-id.png" width="1332" height="552" alt="A screenshot of the Apple developer screen to create an app ID" /></a><figcaption>Create an app ID for the Intents extension (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c62157c-c75a-45ce-90ba-65cfdbf76d95/sirikit-intents05-intents-app-id.png">Large preview</a>)</figcaption></figure>
</li>
<li>Enable this app ID for app groups as well (and set up the group as we did before).</li>
</ol>
<p>Now, create a development provisioning profile for the Intents extension, and regenerate your app’s provisioning profile. Download and install them as you would normally do.</p>
<p>Now that our profiles are installed, we need to go to Xcode and update the app’s entitlements.</p>
<h4 id="updating-your-app-s-entitlements-in-xcode">Updating Your App’s Entitlements In Xcode</h4>
<p>Back in Xcode, choose your project’s name in the project navigator. Then, choose your app’s main target, and go to the “Capabilities” tab. In there, you will see a switch to turn on Siri support.</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74351e5b-9eeb-4680-8961-a30961b1b983/sirikit-intents06-entitlement-add-siri.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74351e5b-9eeb-4680-8961-a30961b1b983/sirikit-intents06-entitlement-add-siri.png" width="1082" height="367" alt="A screenshot of Xcode’s entitlements screen showing SiriKit is enabled" /></a><figcaption>Enable SiriKit in your app's entitlements. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/74351e5b-9eeb-4680-8961-a30961b1b983/sirikit-intents06-entitlement-add-siri.png">Large preview</a>)</figcaption></figure>
<p>Further down the list, you can turn on app groups and configure it.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7048116b-9078-4094-aade-755582023b23/sirikit-intents07-entitlements-app-group.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7048116b-9078-4094-aade-755582023b23/sirikit-intents07-entitlements-app-group.png" alt="A screenshot of Xcode's entitlements screen showing the app group is enabled and configured" width="464" height="214" /></a><figcaption>Configure the app's app group (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7048116b-9078-4094-aade-755582023b23/sirikit-intents07-entitlements-app-group.png">Large preview</a>)</figcaption></figure>
<p>If you have set it up correctly, you’ll see this in your app’s <code>.entitlements</code> file:</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a5d0edc3-6aa6-4202-80a4-5a4c1d44c6d0/sirikit-intents08-entitlements-app-groups.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a5d0edc3-6aa6-4202-80a4-5a4c1d44c6d0/sirikit-intents08-entitlements-app-groups.png" width="1084" height="222" alt="A screenshot of the App's plist showing that the entitlements are set" /></a><figcaption>The plist shows the entitlements that you set (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a5d0edc3-6aa6-4202-80a4-5a4c1d44c6d0/sirikit-intents08-entitlements-app-groups.png">Large preview</a>)</figcaption></figure>
<p>Now, we are finally ready to add the Intents extension target to our project.</p>
<h4 id="adding-the-intents-extension">Adding The Intents Extension</h4>
<p>We’re finally ready to add the extension. In Xcode, choose “File” → “New Target.” This sheet will pop up:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d83a8e9-0784-49b4-9644-22eeb548ce07/sirikit-intents09-add-intents-extension-to-project.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d83a8e9-0784-49b4-9644-22eeb548ce07/sirikit-intents09-add-intents-extension-to-project.png" width="1462" height="1052" alt="A screenshot showing the Intents extension in the New Target dialog in Xcode" /></a><figcaption>Add the Intents extension to your project (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d83a8e9-0784-49b4-9644-22eeb548ce07/sirikit-intents09-add-intents-extension-to-project.png">Large preview</a>)</figcaption></figure>
<p>Choose “Intents Extension” and click the “Next” button. Fill out the following screen:</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d50cf572-502c-4d5d-a750-22dee341f756/sirikit-intents10-new-intents-target.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d50cf572-502c-4d5d-a750-22dee341f756/sirikit-intents10-new-intents-target.png" width="1078" height="572" alt="A screeenshot from Xcode showing how you configure the Intents extension" /></a><figcaption>Configure the Intents extension (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d50cf572-502c-4d5d-a750-22dee341f756/sirikit-intents10-new-intents-target.png">Large preview</a>)</figcaption></figure>
<p>The product name needs to match whatever you made the suffix in the intents app ID on the Apple developer website.</p>
<p>We are choosing not to add an intents UI extension. This isn’t covered in this article, but you could add it later if you need one. Basically, it’s a way to put your own branding and display style into Siri’s visual results.</p>
<p>When you are done, Xcode will create an intents handler class that we can use as a starting part for our Siri implementation.</p>
<h3 id="the-intents-handler-resolve-confirm-and-handle">The Intents Handler: Resolve, Confirm And Handle</h3>
<p>Xcode generated a new target that has a starting point for us.</p>
<p>The first thing you have to do is set up this new target to be in the same app group as the app. As before, go to the “Capabilities” tab of the target, and turn on app groups, and configure it with your group name. Remember, apps in the same group have a sandbox that they can use to share files with each other. We need this in order for Siri requests to get to our app.</p>
<p>List-o-Mat has a function that returns the group document folder. We should use it whenever we want to read or write to a shared file.</p>
<pre class="break-out"><code class="language-javascript">func documentsFolder() -> URL? {
return FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: "group.com.app-o-mat.ListOMat")
}
</code></pre>
<p>For example, when we save the lists, we use this:</p>
<pre class="break-out"><code class="language-javascript">func save(lists: Lists) {
guard let docsDir = documentsFolder() else {
fatalError("no docs dir")
}
let url = docsDir.appendingPathComponent(fileName, isDirectory: false)
// Encode lists as JSON and save to url
}
</code></pre>
<p>The Intents extension template created a file named <code>IntentHandler.swift</code>, with a class named <code>IntentHandler</code>. It also configured it to be the intents’ entry point in the extension’s <code>plist</code>.</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/624e1b19-2fe4-4564-8b8f-80a7ba942319/sirikit-intents11-intent-handler-plist.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/624e1b19-2fe4-4564-8b8f-80a7ba942319/sirikit-intents11-intent-handler-plist.png" width="577" height="29" alt="A screenshot from Xcode showing how the IntentHandler is configured as an entry point" /></a><figcaption>The intent extension plist configures IntentHandler as the entry point</figcaption></figure>
<p>In this same <code>plist</code>, you will see a section to declare the intents we support. We’re going to start with the one that allows searching for lists, which is named <code>INSearchForNotebookItemsIntent</code>. Add it to the array under <code>IntentsSupported</code>.</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e07f699b-3dfe-4094-94cc-994be7998113/sirikit-intents12-domain-add-to-intent.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e07f699b-3dfe-4094-94cc-994be7998113/sirikit-intents12-domain-add-to-intent.png" width="1066" height="182" alt="A screenshot in Xcode showing that the extension plist should list the intents it handles" /></a><figcaption>Add the intent’s name to the intents plist (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e07f699b-3dfe-4094-94cc-994be7998113/sirikit-intents12-domain-add-to-intent.png">Large preview</a>)</figcaption></figure>
<p>Now, go to <code>IntentHandler.swift</code> and replace its contents with this code:</p>
<pre class="break-out"><code class="language-javascript">import Intents
class IntentHandler: INExtension {
override func handler(for intent: INIntent) -> Any? {
switch intent {
case is INSearchForNotebookItemsIntent:
return SearchItemsIntentHandler()
default:
return nil
}
}
}
</code></pre>
<p>The <code>handler</code> function is called to get an object to handle a specific intent. You can just implement all of the protocols in this class and return <code>self</code>, but we’ll put each intent in its own class to keep it better organized.</p>
<p>Because we intend to have a few different classes, let’s give them a common base class for code that we need to share between them:</p>
<pre><code class="language-javascript">class ListOMatIntentsHandler: NSObject {
}
</code></pre>
<p>The intents framework requires us to inherit from <code>NSObject</code>. We’ll fill in some methods later.</p>
<p>We start our search implementation with this:</p>
<pre><code class="language-javascript">class SearchItemsIntentHandler: ListOMatIntentsHandler,
INSearchForNotebookItemsIntentHandling {
}
</code></pre>
<p>To set an intent handler, we need to implement three basic steps</p>
<ol>
<li><strong>Resolve</strong> the parameters.<br />
Make sure required parameters are given, and disambiguate any you don’t fully understand.</li>
<li><strong>Confirm</strong> that the request is doable.<br />
This is often optional, but even if you know that each parameter is good, you might still need access to an outside resource or have other requirements.</li>
<li><strong>Handle</strong> the request.<br />
Do the thing that is being requested.</li>
</ol>
<p><code>INSearchForNotebookItemsIntent</code>, the first intent we’ll implement, can be used as a task search. The kinds of requests we can handle with this are, “In List-o-Mat, show the grocery store list” or “In List-o-Mat, show the store list.”</p>
<p>Aside: “List-o-Mat” is actually a bad name for a SiriKit app because Siri has a hard time with hyphens in apps. Luckily, SiriKit allows us to have alternate names and to provide pronunciation. In the app’s <code>Info.plist</code>, add this section:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7c3e83a1-940d-4b65-96fa-dc4b9a50fe90/sirikit-intents13-alternate-app-name.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7c3e83a1-940d-4b65-96fa-dc4b9a50fe90/sirikit-intents13-alternate-app-name.png" width="566" height="78" alt="A screenshot from Xcode showing that the app plist can add alternate app names and pronunciations" /></a><figcaption>Add alternate app name's and pronunciation guides to the app plist</figcaption></figure>
<p>This allows the user to say “list oh mat” and for that to be understood as a single word (without hyphens). It doesn’t look ideal on the screen, but without it, Siri sometimes thinks “List” and “Mat” are separate words and gets very confused.</p>
<h4 id="resolve-figuring-out-the-parameters">Resolve: Figuring Out The Parameters</h4>
<p>For a search for notebook items, there are several parameters:</p>
<ol>
<li>the item type (a task, a task list, or a note),</li>
<li>the title of the item,</li>
<li>the content of the item,</li>
<li>the completion status (whether the task is marked done or not),</li>
<li>the location it is associated with,</li>
<li>the date it is associated with.</li>
</ol>
<p>We require only the first two, so we’ll need to write resolve functions for them. <code>INSearchForNotebookItemsIntent</code> has methods for us to implement.</p>
<p>Because we only care about showing task lists, we’ll hardcode that into the resolve for item type. In <code>SearchItemsIntentHandler</code>, add this:</p>
<pre class="break-out"><code class="language-javascript">func resolveItemType(for intent: INSearchForNotebookItemsIntent,
with completion: @escaping (INNotebookItemTypeResolutionResult) -> Void) {
completion(.success(with: .taskList))
}
</code></pre>
<p>So, no matter what the user says, we’ll be searching for task lists. If we wanted to expand our search support, we’d let Siri try to figure this out from the original phrase and then just use <code>completion(.needsValue())</code> if the item type was missing. Alternatively, we could try to guess from the title by seeing what matches it. In this case, we would complete with success when Siri knows what it is, and we would use <code>completion(.notRequired())</code> when we are going to try multiple possibilities.</p>
<p>Title resolution is a little trickier. What we want is for Siri to use a list if it finds one with an exact match for what you said. If it’s unsure or if there is more than one possibility, then we want Siri to ask us for help in figuring it out. To do this, SiriKit provides a set of resolution enums that let us express what we want to happen next.</p>
<p>So, if you say “Grocery Store,” then Siri would have an exact match. But if you say “Store,” then Siri would present a menu of matching lists.</p>
<p>We’ll start with this function to give the basic structure:</p>
<pre class="break-out"><code class="language-javascript">func resolveTitle(for intent: INSearchForNotebookItemsIntent, with completion: @escaping (INSpeakableStringResolutionResult) -> Void) {
guard let title = intent.title else {
completion(.needsValue())
return
}
let possibleLists = getPossibleLists(for: title)
completeResolveListName(with: possibleLists, for: title, with: completion)
}
</code></pre>
<p>We’ll implement <code>getPossibleLists(for:)</code> and <code>completeResolveListName(with:for:with:)</code> in the <code>ListOMatIntentsHandler</code> base class.</p>
<p><code>getPossibleLists(for:)</code> needs to try to fuzzy match the title that Siri passes us with the actual list names.</p>
<pre class="break-out"><code class="language-javascript">public func getPossibleLists(for listName: INSpeakableString) -> [INSpeakableString] {
var possibleLists = [INSpeakableString]()
for l in loadLists() {
if l.name.lowercased() == listName.spokenPhrase.lowercased() {
return [INSpeakableString(spokenPhrase: l.name)]
}
if l.name.lowercased().contains(listName.spokenPhrase.lowercased()) || listName.spokenPhrase.lowercased() == "all" {
possibleLists.append(INSpeakableString(spokenPhrase: l.name))
}
}
return possibleLists
}
</code></pre>
<p>We loop through all of our lists. If we get an exact match, we’ll return it, and if not, we’ll return an array of possibilities. In this function, we’re simply checking to see whether the word the user said is contained in a list name (so, a pretty simple match). This lets “Grocery” match “Grocery Store.” A more advanced algorithm might try to match based on words that sound the same (for example, with the <a href="https://en.wikipedia.org/wiki/Soundex">Soundex algorithm</a>),</p>
<p><code>completeResolveListName(with:for:with:)</code> is responsible for deciding what to do with this list of possibilities.</p>
<pre class="break-out"><code class="language-javascript">public func completeResolveListName(with possibleLists: [INSpeakableString], for listName: INSpeakableString, with completion: @escaping (INSpeakableStringResolutionResult) -> Void) {
switch possibleLists.count {
case 0:
completion(.unsupported())
case 1:
if possibleLists[0].spokenPhrase.lowercased() == listName.spokenPhrase.lowercased() {
completion(.success(with: possibleLists[0]))
} else {
completion(.confirmationRequired(with: possibleLists[0]))
}
default:
completion(.disambiguation(with: possibleLists))
}
}
</code></pre>
<p>If we got an exact match, we tell Siri that we succeeded. If we got one inexact match, we tell Siri to ask the user if we guessed it right.</p>
<p>If we got multiple matches, then we use <code>completion(.disambiguation(with: possibleLists))</code> to tell Siri to show a list and let the user pick one.</p>
<p>Now that we know what the request is, we need to look at the whole thing and make sure we can handle it.</p>
<h4 id="confirm-check-all-of-your-dependencies">Confirm: Check All Of Your Dependencies</h4>
<p>In this case, if we have resolved all of the parameters, we can always handle the request. Typical <code>confirm()</code> implementations might check the availability of external services or check authorization levels.</p>
<p>Because <code>confirm()</code> is optional, we could just do nothing, and Siri would assume we could handle any request with resolved parameters. To be explicit, we could use this:</p>
<pre class="break-out"><code class="language-javascript">func confirm(intent: INSearchForNotebookItemsIntent, completion: @escaping (INSearchForNotebookItemsIntentResponse) -> Void) {
completion(INSearchForNotebookItemsIntentResponse(code: .success, userActivity: nil))
}
</code></pre>
<p>This means we can handle anything.</p>
<h4 id="handle-do-it">Handle: Do It</h4>
<p>The final step is to handle the request.</p>
<pre class="break-out"><code class="language-javascript">func handle(intent: INSearchForNotebookItemsIntent, completion: @escaping (INSearchForNotebookItemsIntentResponse) -> Void) {
guard
let title = intent.title,
let list = loadLists().filter({ $0.name.lowercased() == title.spokenPhrase.lowercased()}).first
else {
completion(INSearchForNotebookItemsIntentResponse(code: .failure, userActivity: nil))
return
}
let response = INSearchForNotebookItemsIntentResponse(code: .success, userActivity: nil)
response.tasks = list.items.map {
return INTask(title: INSpeakableString(spokenPhrase: $0.name),
status: $0.done ? INTaskStatus.completed : INTaskStatus.notCompleted,
taskType: INTaskType.notCompletable,
spatialEventTrigger: nil,
temporalEventTrigger: nil,
createdDateComponents: nil,
modifiedDateComponents: nil,
identifier: "\(list.name)\t\($0.name)")
}
completion(response)
}
</code></pre>
<p>First, we find the list based on the title. At this point, <code>resolveTitle</code> has already made sure that we’ll get an exact match. But if there’s an issue, we can still return a failure.</p>
<p>When we have a failure, we have the option of passing a user activity. If your app uses <a href="https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Handoff/HandoffFundamentals/HandoffFundamentals.html">Handoff</a> and has a way to handle this exact type of request, then Siri might try deferring to your app to try the request there. It will not do this when we are in a voice-only context (for example, you started with “Hey Siri”), and it doesn’t guarantee that it will do it in other cases, so don’t count on it.</p>
<p>This is now ready to test. Choose the intent extension in the target list in Xcode. But before you run it, edit the scheme.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b0ce00d-7b29-41ed-b668-32d8f3ff2591/sirikit-intents14-edit-intent-scheme.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b0ce00d-7b29-41ed-b668-32d8f3ff2591/sirikit-intents14-edit-intent-scheme.png" width="326" height="116" alt="A screenshot from Xcode showing how to edit a scheme" /></a><figcaption>Edit the scheme of the the intent to add a sample phrase for debugging.</figcaption></figure>
<p>That brings up a way to provide a query directly:</p>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48619fcf-3e87-4ef3-82ed-d12bb57790b6/sirikit-intents15-siri-query.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48619fcf-3e87-4ef3-82ed-d12bb57790b6/sirikit-intents15-siri-query.png" width="710" height="286" alt="A screenshot from Xcode showing the edit scheme dialog" /></a><figcaption>Add the sample phrase to the Run section of the scheme. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/48619fcf-3e87-4ef3-82ed-d12bb57790b6/sirikit-intents15-siri-query.png">Large preview</a>)</figcaption></figure>
<p>Notice, I am using “ListOMat” because of the hyphens issue mentioned above. Luckily, it’s pronounced the same as my app’s name, so it should not be much of an issue.</p>
<p>Back in the app, I made a “Grocery Store” list and a “Hardware Store” list. If I ask Siri for the “store” list, it will go through the disambiguation path, which looks like this:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7752611a-ee4a-43ba-b34f-b1268dae33bb/sirikit-intentslist-o-mat-store.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7752611a-ee4a-43ba-b34f-b1268dae33bb/sirikit-intentslist-o-mat-store.gif" width="602" height="884" alt="An animated GIF showing Siri handling a request to show the Store list" /></a><figcaption>Siri handles the request by asking for clarification. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7752611a-ee4a-43ba-b34f-b1268dae33bb/sirikit-intentslist-o-mat-store.gif">Large preview</a>)</figcaption></figure>
<p>If you say “Grocery Store,” then you’ll get an exact match, which goes right to the results.</p>
<h3 id="adding-items-via-siri">Adding Items Via Siri</h3>
<p>Now that we know the basic concepts of resolve, confirm and handle, we can quickly add an intent to add an item to a list.</p>
<p>First, add <code>INAddTasksIntent</code> to the extension’s plist:</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5d938700-2a88-4a68-9e22-d6cc9ca5fa64/sirikit-intents16-all-intents-plist.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5d938700-2a88-4a68-9e22-d6cc9ca5fa64/sirikit-intents16-all-intents-plist.png" width="588" height="110" alt="A screenshot in XCode showing the new intent being added to the plist" /></a><figcaption>Add the INAddTasksIntent to the extension plist (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5d938700-2a88-4a68-9e22-d6cc9ca5fa64/sirikit-intents16-all-intents-plist.png">Large preview</a>)</figcaption></figure>
<p>Then, update our <code>IntentHandler</code>’s <code>handle</code> function.</p>
<pre><code class="language-javascript">override func handler(for intent: INIntent) -> Any? {
switch intent {
case is INSearchForNotebookItemsIntent:
return SearchItemsIntentHandler()
case is INAddTasksIntent:
return AddItemsIntentHandler()
default:
return nil
}
}
</code></pre>
<p>Add a stub for the new class:</p>
<pre class="break-out"><code class="language-javascript">class AddItemsIntentHandler: ListOMatIntentsHandler, INAddTasksIntentHandling {
}
</code></pre>
<p>Adding an item needs a similar <code>resolve</code> for searching, except with a target task list instead of a title.</p>
<pre class="break-out"><code class="language-javascript">func resolveTargetTaskList(for intent: INAddTasksIntent, with completion: @escaping (INTaskListResolutionResult) -> Void) {
guard let title = intent.targetTaskList?.title else {
completion(.needsValue())
return
}
let possibleLists = getPossibleLists(for: title)
completeResolveTaskList(with: possibleLists, for: title, with: completion)
}
</code></pre>
<p><code>completeResolveTaskList</code> is just like <code>completeResolveListName</code>, but with slightly different types (a task list instead of the title of a task list).</p>
<pre class="break-out"><code class="language-javascript">public func completeResolveTaskList(with possibleLists: [INSpeakableString], for listName: INSpeakableString, with completion: @escaping (INTaskListResolutionResult) -> Void) {
let taskLists = possibleLists.map {
return INTaskList(title: $0, tasks: [], groupName: nil, createdDateComponents: nil, modifiedDateComponents: nil, identifier: nil)
}
switch possibleLists.count {
case 0:
completion(.unsupported())
case 1:
if possibleLists[0].spokenPhrase.lowercased() == listName.spokenPhrase.lowercased() {
completion(.success(with: taskLists[0]))
} else {
completion(.confirmationRequired(with: taskLists[0]))
}
default:
completion(.disambiguation(with: taskLists))
}
}
</code></pre>
<p>It has the same disambiguation logic and behaves in exactly the same way. Saying “Store” needs to be disambiguated, and saying “Grocery Store” would be an exact match.</p>
<p>We’ll leave <code>confirm</code> unimplemented and accept the default. For <code>handle</code>, we need to add an item to the list and save it.</p>
<pre class="break-out"><code class="language-javascript">func handle(intent: INAddTasksIntent, completion: @escaping (INAddTasksIntentResponse) -> Void) {
var lists = loadLists()
guard
let taskList = intent.targetTaskList,
let listIndex = lists.index(where: { $0.name.lowercased() == taskList.title.spokenPhrase.lowercased() }),
let itemNames = intent.taskTitles, itemNames.count > 0
else {
completion(INAddTasksIntentResponse(code: .failure, userActivity: nil))
return
}
// Get the list
var list = lists[listIndex]
// Add the items
var addedTasks = [INTask]()
for item in itemNames {
list.addItem(name: item.spokenPhrase, at: list.items.count)
addedTasks.append(INTask(title: item, status: .notCompleted, taskType: .notCompletable, spatialEventTrigger: nil, temporalEventTrigger: nil, createdDateComponents: nil, modifiedDateComponents: nil, identifier: nil))
}
// Save the new list
lists[listIndex] = list
save(lists: lists)
// Respond with the added items
let response = INAddTasksIntentResponse(code: .success, userActivity: nil)
response.addedTasks = addedTasks
completion(response)
}
</code></pre>
<p>We get a list of items and a target list. We look up the list and add the items. We also need to prepare a response for Siri to show with the added items and send it to the completion function.</p>
<p>This function can handle a phrase like, “In ListOMat, add apples to the grocery list.” It can also handle a list of items like, “rice, onions and olives.”</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4007cc94-d909-4357-af25-2d9fc7c9738e/sirikit-intents17-list-o-mat-add-items.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4007cc94-d909-4357-af25-2d9fc7c9738e/sirikit-intents17-list-o-mat-add-items.png" width="559" height="981" alt="A screenshot of the simulator showing Siri adding items to the grocery store list" /></a><figcaption>Siri adds a few items to the grocery store list</figcaption></figure>
<h3 id="almost-done-just-a-few-more-settings">Almost Done, Just A Few More Settings</h3>
<p>All of this will work in your simulator or local device, but if you want to submit this, you’ll need to add a <code>NSSiriUsageDescription</code> key to your app’s <code>plist</code>, with a string that describes what you are using Siri for. Something like “Your requests about lists will be sent to Siri” is fine.</p>
<p>You should also add a call to:</p>
<pre><code class="language-javascript">INPreferences.requestSiriAuthorization { (status) in }
</code></pre>
<p>Put this in your main view controller’s <code>viewDidLoad</code> to ask the user for Siri access. This will show the message you configured above and also let the user know that they could be using Siri for this app.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/985615fb-8ee0-40d2-800c-1f51711f0eff/sirikit-intents18-ask-for-siri.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/985615fb-8ee0-40d2-800c-1f51711f0eff/sirikit-intents18-ask-for-siri.png" width="277" height="234" alt="A screenshot of the dialog that a device pops up when you ask for Siri permission" /></a><figcaption>The device will ask for permission if you try to use Siri in the app.</figcaption></figure>
<p>Finally, you’ll need to tell Siri what to tell the user if the user asks what your app can do, by providing some <a href="https://developer.apple.com/documentation/sirikit/registering_custom_vocabulary_with_sirikit/global_vocabulary_reference/intent_phrases">sample phrases</a>:</p>
<ol>
<li>Create a <code>plist</code> file in your app (not the extension), named <code>AppIntentVocabulary.plist</code>.</li>
<li>Fill out the intents and phrases that you support.</li>
</ol>
<figure class="break-out"><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc24c80b-798e-4dfa-9780-b8fee734d0ad/sirikit-intents19-example-phrases.png"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc24c80b-798e-4dfa-9780-b8fee734d0ad/sirikit-intents19-example-phrases.png" width="717" height="244" alt="A screenshot of the AppIntentVocabulary.plist showing sample phrases" /></a><figcaption>Add an <code>AppIntentVocabulary.plist</code> to list the sample phrases that will invoke the intent you handle. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc24c80b-798e-4dfa-9780-b8fee734d0ad/sirikit-intents19-example-phrases.png">Large preview</a>)</figcaption></figure>
<p>There is no way to really know all of the phrases that Siri will use for an intent, but Apple does provide a few samples for each intent in its documentation. The <a href="https://developer.apple.com/documentation/sirikit/insearchfornotebookitemsintent">sample phrases for task-list searching</a> show us that Siri can understand “Show me all my notes on <appName>,” but I found other phrases by trial and error (for example, Siri understands what “lists” are too, not just notes).</p>
<h3 id="summary">Summary</h3>
<p>As you can see, adding Siri support to an app has a lot of steps, with a lot of configuration. But the code needed to handle the requests was fairly simple.</p>
<p>There are a lot of steps, but each one is small, and you might be familiar with a few of them if you have used extensions before.</p>
<p>Here is what you’ll need to prepare for a new extension on Apple’s developer website:</p>
<ol>
<li>Make an app ID for an Intents extension.</li>
<li>Make an app group if you don’t already have one.</li>
<li>Use the app group in the app ID for the app and extension.</li>
<li>Add Siri support to the app’s ID.</li>
<li>Regenerate the profiles and download them.</li>
</ol>
<p>And here are the steps in Xcode for creating Siri’s Intents extension:</p>
<ol>
<li>Add an Intents extension using the Xcode template.</li>
<li>Update the entitlements of the app and extension to match the profiles (groups and Siri support).</li>
<li>Add your intents to the extension’s <code>plist</code>.</li>
</ol>
<p>And you’ll need to add code to do the following things:</p>
<ol>
<li>Use the app group sandbox to communicate between the app and extension.</li>
<li>Add classes to support each intent with resolve, confirm and handle functions.</li>
<li>Update the generated <code>IntentHandler</code> to use those classes.</li>
<li>Ask for Siri access somewhere in your app.</li>
</ol>
<p>Finally, there are some Siri-specific configuration settings:</p>
<ol>
<li>Add the Siri support security string to your app’s <code>plist</code>.</li>
<li>Add sample phrases to an <code>AppIntentVocabulary.plist</code> file in your app.</li>
<li>Run the intent target to test; edit the scheme to provide the phrase.</li>
</ol>
<p>OK, that is a lot, but if your app fits one of Siri’s domains, then users will expect that they can interact with it via voice. And because the competition for voice assistants is so good, we can only expect that WWDC 2018 will bring a bunch more domains and, hopefully, much better Siri.</p>
<h4 id="further-reading">Further Reading</h4>
<ul>
<li>“<a href="https://developer.apple.com/documentation/sirikit">SiriKit</a>,” Apple<br />
The technical documentation contains the full list of domains and intents.</li>
<li>“<a href="https://developer.apple.com/library/content/samplecode/IntentHandling/Introduction/Intro.html">Guides and Sample Code</a>,” Apple<br />
Includes code for many domains.</li>
<li>“<a href="https://developer.apple.com/videos/play/wwdc2016/217/">Introducing SiriKit</a>” (video, Safari only), WWDC 2016 Apple</li>
<li>“<a href="https://developer.apple.com/videos/play/wwdc2017/214/">What’s New in SiriKit</a>” (video, Safari only), WWDC 2017, Apple<br />
Apple introduces lists and notes</li>
<li>“<a href="https://developer.apple.com/documentation/sirikit/lists_and_notes">Lists and Notes</a>,” Apple<br />
The full list of lists and notes intents.</li>
</ul>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(da, ra, al, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Christopher Murphy</author>
<title>Becoming A UX Leader</title>
<link>https://www.smashingmagazine.com/2018/04/becoming-a-ux-leader/</link>
<pubDate>Wed, 11 Apr 2018 12:50:15 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/becoming-a-ux-leader/</guid>
<description>(This is a sponsored article.) In my previous article on Building UX Teams, I explored the rapidly growing need for UX teams as a result of the emergence of design as a wider business driver. As teams grow, so too does a need for leaders to nurture and guide them.
In my final article in this series on user experience design, I’ll explore the different characteristics of an effective UX leader, and provide some practical advice about growing into a leadership role.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/becoming-a-ux-leader/" />
<title>Becoming A UX Leader</title>
</head>
<body>
<article>
<header>
<h1>Becoming A UX Leader</h1>
<address>Christopher Murphy</address>
<time datetime="2018-04-11T12:50:15+02:00" class="op-published">2018-04-11T12:50:15+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>(<em>This is a sponsored article</em>.) In my previous article on <a href="https://www.smashingmagazine.com/2018/03/building-a-ux-team/">Building UX Teams</a>, I explored the rapidly growing need for UX teams as a result of the emergence of design as a wider business driver. As teams grow, so too does a need for leaders to nurture and guide them.</p>
<p>In my final article in this series on user experience design, I’ll explore the different characteristics of an effective UX leader, and provide some practical advice about growing into a leadership role.</p>
<p>I’ve worked in many organizations — both large and small, and in both the private and public sectors — and, from experience, <strong>leadership is a rare quality that is far from commonplace</strong>. Truly inspiring leaders are few and far between; if you’re fortunate to work with one, make every effort to learn from them.</p>
<p>Managers that have risen up the ranks don’t automatically become great leaders, and perhaps one of the biggest lessons I’ve learned is that truly inspirational leaders — those that inspire passion and commitment — aren’t as commonplace as you’d think.</p>
<p>A UX leader is truly a hybrid, perhaps more so than in many other — more traditional — businesses. A UX leader needs to encompass a wide range of skills:</p>
<ul>
<li>Establishing, driving and articulating a vision;</li>
<li>Communicating across different teams, including design, research, writing, engineering, and business (no small undertaking!);</li>
<li>Acting as a champion for user-focused design;</li>
<li>Mapping design decisions to key performance indicators (KPIs), and vice-versa, so that success can be measured; and</li>
<li>Managing a team, ensuring all the team’s members are challenged and motivated.</li>
</ul>
<p>UX leadership is not unlike being bi-lingual — or, more accurately, multi-lingual — and it’s a skill that requires dexterity so that nothing gets lost in translation.</p>
<p>This hybrid skill set can seem daunting, but — like anything — <strong>the attributes of leadership can be learned and developed</strong>. In my final article in this series of ten, I’ll explore what defines a leader and focus on the qualities and attributes needed to step up to this important role.</p>
<div class="c-garfield-the-cat">
<h3 id="undertaking-a-skills-audit">Undertaking A Skills Audit</h3>
<p>Every leader is different, and every leader will be informed by the different experiences they have accumulated to date. There are, however, certain qualities and attributes that leaders tend to share in common.</p>
<p><strong>Great leaders demonstrate self-awareness</strong>. They tend to have the maturity to have looked themselves in the mirror and identified aspects of their character that they may need to develop if they are to grow as leaders.</p>
<p>Having identified their strengths and weaknesses and pinpointing areas for improvement, they will have an idea of what they know and — equally important — what they don’t know. As Donald Rumsfeld famously put it:</p>
<blockquote>“There are known knowns: there are things we know we know. We also know there are known unknowns: That is to say, we know there are some things we do not know. But there are also unknown unknowns: the things we don't know we don't know.”</blockquote>
<p>Rumsfeld might have been talking about unknown unknowns in a conflict scenario, but his insight applies equally to the world of leadership. To grow as a leader, it’s important to widen your knowledge so that it addresses both:</p>
<ul>
<li><strong>The Known Unknowns</strong><br />
Skills you know that you don’t know, which you can identify through a self-critical skills audit; and</li>
<li><strong>The Unknown Unknowns</strong><br />
Skills you don’t know you don’t know, which you can identify through inviting your peers to review your strengths and weaknesses.</li>
</ul>
<p>In short, a skills audit will equip you with a roadmap that you can use as a map to plot a path from where you are now to where you want to be.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png"
sizes="100vw"
alt="a map that you can use to plot a path from where you are now to where you want to be"
/>
</a>
<figcaption class="op-vertical-bottom">
Undertaking a skills audit will enable you to develop a map that you can use to plot a path from where you are now to where you want to be. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/192739e7-cf18-4c76-bd52-25d0fa70cd3b/skills-roadmap.png'>Large preview</a>)
</figcaption>
</figure>
<p>To become an effective leader is to embark upon a journey, identifying the gaps in your knowledge and — step by step — addressing these gaps so that you’re prepared for the leadership role ahead.</p>
<h4 id="identifying-the-gaps-in-your-knowledge">Identifying The Gaps In Your Knowledge</h4>
<p>One way to identify the gaps in your knowledge is to undertake an honest and self-reflective ‘skills audit’ while <strong>making an effort to both learn about yourself and learn about the environment</strong> you are working within.</p>
<p>To become a UX leader, it’s critical to develop this self-awareness, identifying the knowledge you need to acquire by undertaking both self-assessments and peer assessments. With your gaps in knowledge identified, it’s possible to build a learning pathway to address these gaps.</p>
<p>In the introduction, I touched on a brief list of skills that an effective and well-equipped leader needs to develop. That list is just the tip of a very large iceberg. At the very least, a hybrid UX leader needs to equip themselves by:</p>
<ul>
<li>Developing an awareness of context, expanding beyond the realms of design to encompass a broader business context;</li>
<li>Understanding and building relationships with a cross-section of team members;</li>
<li>Identifying outcomes and goals, establishing KPIs that will help to deliver these successfully;</li>
<li>Managing budgets, both soft and hard; and</li>
<li>Planning and mapping time, often across a diversified team.</li>
</ul>
<p>These are just a handful of <strong>skills that an effective UX leader needs to develop</strong>. If you’re anything like me, hardly any of this was taught at art school, so you’ll need to learn these skills yourself<strong>.</strong> This article will help to point you in the right direction. I’ve also provided a list of required reading for reference to ensure you’re well covered.</p>
<h4 id="a-360º-assessment">A 360º Assessment</h4>
<p>A 360º degree leadership assessment is a form of <a href="https://www.thebalance.com/360-degree-feedback-information-1917537">feedback for leaders</a>. Drawn from the world of business, but equally applicable to the world of user experience, it is an excellent way to measure your effectiveness and influence as a leader.</p>
<p>Unlike a top-down appraisal, where a leader or manager appraises an employee underneath them in the hierarchy, a 360º assessment involves inviting your colleagues — at your peer level — to appraise you, highlighting your strengths and weaknesses.</p>
<p>This isn’t easy — and can lead to some uncomfortable home truths — but it can prove a critical tool in helping you to identify the qualities you need to work on. You might, for example, consider yourself an excellent listener only to discover that your colleagues feel like this is something you need to work on.</p>
<p>This willingness to put yourself under the spotlight, identify your weaknesses, address these, and develop yourself is one of the defining characteristics of leaders. <strong>Great leaders are always learning</strong> and they aren’t afraid to admit that fact.</p>
<p>A 360º assessment is a great way to uncover your ‘unknown unknowns’, i.e. the gaps in your knowledge that you aren’t aware of. With these discoveries in hand, it’s possible to build ‘a learning road-map’ that will allow you to develop the skills you need.</p>
<h4 id="build-a-roadmap">Build A Roadmap</h4>
<p>With the gaps in your knowledge identified, it’s important to adopt some strategies to address these gaps. Great leaders understand that learning is a lifelong process and to transition into a leadership role will require — inevitably — the acquisition of new skills.</p>
<p>To develop as a leader, it’s important to address your knowledge gaps in a considered and systematic manner. By working back from your skills audit, <strong>identify what you need to work on</strong> and build a learning programme accordingly.</p>
<p>This will inevitably involve developing an understanding of different domains of knowledge, but that’s the leader’s path. The important thing is to take it step by step and, of course, to take that first step.</p>
<p>We are fortunate now to be working in an age in which we have an abundance of learning materials at our fingertips. We no longer need to enroll in a course at a university to learn; we can put together our own bespoke learning programmes.</p>
<p>We now have so many tools we can use, from paid resources like <a href="https://www.skillshare.com/">Skillshare</a> which offers “access to a learning platform for personalized, on-demand learning,” to free resources like <a href="https://www.futurelearn.com">FutureLearn</a> which offers the ability to “learn new skills, pursue your interests and advance your career.”</p>
<p>In short, <strong>you have everything you need to enhance your career</strong> just a click away.</p>
<h3 id="it-s-not-just-you">It’s Not Just You</h3>
<p>Great leaders understand that it’s not about the effort of individuals, working alone. It’s about the effort of individuals — working collectively. Looking back through the history of innovation, we can see that most (if not all) of the greatest breakthroughs were driven by teams that were motivated by inspirational leaders.</p>
<p>Thomas Edison didn’t invent the lightbulb alone; he had an ‘<a href="https://www.nps.gov/nr/twhp/curriculumkit/lessons/edison/4edison.htm">invention factory</a>’ housed in a series of research laboratories. Similarly, when we consider the development of contemporary graphical user interfaces (GUIs), these emerged from the teamwork of <a href="https://www.parc.com/about/">Xerox PARC</a>. The <a href="https://www.fastcompany.com/1692625/how-team-apple-made-ipod-dream-reality">iPod</a> was similarly conceived.</p>
<p>Great leaders understand that it’s not about them as individuals, but <strong>it’s about the teams they put together</strong>, which they motivate and orchestrate. They have the humility to build and lead teams that deliver towards the greater good.</p>
<p>This — above all — is one of the defining characteristics of a great leader: they prioritize and celebrate the team’s success over and above their own success.</p>
<h4 id="it-s-all-about-teamwork">It’s All About Teamwork</h4>
<p>Truly great leaders understand the importance that teams play in delivering outcomes and goals. One of the most important roles a leader needs to undertake is to act as a lynchpin that sits at the heart of a team, identifying new and existing team members, nurturing them, and <strong>building them into a team that works effectively together</strong>.</p>
<p>A forward-thinking leader won’t just focus on the present, but will proactively develop a vision and long-term goals for future success. To deliver upon this vision of future success will involve both identifying potential new team members, but — just as importantly — developing existing team members. This involves opening your eyes to the different aspects of the business environment you occupy, getting to know your team, and identifying team members’ strengths and weaknesses.</p>
<p>As a UX leader, an important role you’ll play is helping others by mentoring and coaching them, ensuring they are equipped with the skills they need to grow. Again, this is where a truly selfless leader will put others first, in the knowledge that <strong>the stronger the team, the stronger the outcomes will be</strong>.</p>
<p>As a UX leader, you’ll also act as a champion for design within the wider business context. You’ll act as a bridge — and occasionally, a buffer — between the interface of business requirements and design requirements. Your role will be to champion the power of design and sell its benefits, always singing your team’s praises and — occasionally — fighting on their behalf (often without their awareness).</p>
<h4 id="the-art-of-delegation">The Art Of Delegation</h4>
<p>It’s possible to build a great UX team from the inside by developing existing team members, and an effective leader will use delegation as an effective development tool to enhance their team members’ capabilities.</p>
<p>Delegation isn’t just passing off the tasks you don’t want to do, it’s about <strong>empowering the different individuals in a team</strong>. A true leader understands this and spends the time required to learn how to delegate effectively.</p>
<p>Delegation is about education and expanding others’ skill sets, and it’s a powerful tool when used correctly. Effective delegation is a skill, one that you’ll need to acquire to step up into a UX leadership role.</p>
<p>When delegating a task to a team member, it’s important to explain to them why you’re delegating the task. As a leader, your role is to <strong>provide clear guidance</strong> and this involves explaining why you’ve chosen a team member for a task and how they will be supported, developed and rewarded for taking the task on.</p>
<p>This latter point is critical: All too often managers who lack leadership skills use delegation as a means to offload tasks and responsibility, unaware of the power of delegation. This is poor delegation and it’s ineffective leadership, though I imagine, sadly, we have all experienced it! An effective leader understands and strives to delegate effectively by:</p>
<ul>
<li>defining the task, establishing the outcomes and goals;</li>
<li>identifying the appropriate individual or team to take the task on;</li>
<li>assessing the team member(s) ability and ascertaining any training needs;</li>
<li>explaining their reasoning, clearly outlining why they chose the individual or team;</li>
<li>stating the required results;</li>
<li>agreeing on realistic deadlines; and</li>
<li>providing feedback on completion of the task.</li>
</ul>
<p>When outlined like this, it becomes clear that <strong>effective delegation is more than simply passing on a task you’re unwilling to undertake</strong>. Instead, it’s a powerful tool that an effective UX leader uses to enable their team members to take ownership of opportunities, whilst growing their skills and experience.</p>
<h4 id="give-success-and-accept-failure">Give Success And Accept Failure</h4>
<p>A great leader is selfless: they give credit for any successes to the team; and accept the responsibility for any failures alone.</p>
<p>A true leader gives success to the team, ensuring that — when there’s a win — the team is celebrated for its success. A true leader takes pleasure in celebrating the team’s win. When it comes to failure, however, a true leader steps up and takes responsibility. A mark of a truly great leader is this selflessness.</p>
<p>As a leader, <strong>you set the direction and nurture the team</strong>, so it stands to reason that, if things go wrong — which they often do — you’re willing to shoulder the responsibility. This understanding — that you need to give success and accept failure — is what separates great leaders from mediocre managers.</p>
<p>Poor managers will seek to ‘deflect the blame,’ looking for anyone but themselves to apportion responsibility to. Inspiring leaders are aware that, at the end of the day, they are responsible for the decisions made and outcomes reached; when things go wrong they accept responsibility.</p>
<p>If you’re to truly inspire others and lead them to achieve great things, it’s important to remember this distinction between managers and leaders. By giving success and accepting failure, you’ll breed intense loyalty in your team.</p>
<h3 id="lead-by-example">Lead By Example</h3>
<p>Great leaders understand the importance of leading by example, acting as a beacon for others. To truly inspire a team, it helps to connect yourself with that team, and not isolate yourself. Rolling up your sleeves and pitching in, especially when deadlines are pressing, is a great way to demonstrate that you haven’t lost touch with the ‘front line.’</p>
<p>A great leader understands that success is — always — a team effort and that a motivated team will deliver far more than the sum of its parts.</p>
<p>As I’ve noted in my previous articles: If you’re ever the smartest person in a room, find another room. An effective leader has the confidence to surround themselves with other, smarter people.</p>
<p>Leadership isn’t about individual status or being seen to be the most talented. It’s about teamwork and getting the most out of a well-oiled machine of individuals working effectively together.</p>
<h4 id="get-out-of-your-silo">Get Out Of Your Silo</h4>
<p>To lead effectively, it’s important to get out of your silo and to see the world as others do. This means getting to know all of the team, throughout the organization and at every level.</p>
<p>Leaders that isolate themselves — in their often luxurious corner offices — are, in my experience, poor leaders (if, indeed, they can be called leaders at all!). By distancing themselves from the individuals that make up an organization they run the very real risk of losing touch.</p>
<p>To lead, get out of your silo and acquaint yourself with the totality of your team and, if you’re considering a move into leadership, make it your primary task to explore all the facets of the business.</p>
<h4 id="the-pieces-of-the-jigsaw">The Pieces Of The Jigsaw</h4>
<p>To lead effectively, you need to have an understanding of others and their different skills. In my last article, <a href="https://www.smashingmagazine.com/2018/03/building-a-ux-team/">Building a UX Team</a>, I wrote about the idea of ‘T-shaped’ people — those that have a depth of skill in their field, along with the willingness and ability to collaborate across disciplines. Great leaders tend to be T-shaped, flourishing by seeing things from others’ perspectives.</p>
<p>Every organization — no matter how large or small — is like an elaborate jigsaw that is made up of many different interlocking parts. An effective leader is informed by an understanding of this context, they will have made the effort to see all of the pieces of the jigsaw. As a UX leader, you’ll need to <strong>familiarize yourself with a wide range of different teams</strong>, including design, research, writing, engineering, and business.</p>
<p>To lead effectively, it’s important to push outside of your comfort zone and learn about these different specialisms. Do so and you will ensure that you can communicate to these different stakeholders. At the risk of mixing metaphors, you will be the glue that holds the jigsaw together.</p>
<h4 id="sweat-the-details">Sweat The Details</h4>
<p>As Charles and Ray Eames put it:</p>
<blockquote>“The details aren’t the details, they make the product.”</blockquote>
<p>Great leaders understand this: they set the bar high and they encourage and motivate the teams they lead to deliver on the details. To lead a team, it’s important to <strong>appreciate the need to strive for excellence</strong>. Great leaders aren’t happy to accept the status quo, especially if the status quo can be improved upon.</p>
<p>Of course, these qualities can be learned, but many of us — thankfully — have them, innately. Few (if any) of us are happy with second best and, in a field driven by a desire to create delightful and memorable user experiences, we appreciate the importance of details and their place in the grand scheme of things. This is a great foundation on which to build leadership skills.</p>
<p>To thrive as a leader, it’s important to share this focus on the details with others, ensuring they understand and appreciate the role that the details play in the whole. Act as a beacon of excellence: <strong>lead by example</strong>; never settle for second best; give success and accept failure… and your team will follow you.</p>
<h3 id="in-closing">In Closing</h3>
<p>As user experience design matures as a discipline, and the number of different specializations multiplies, so too does the discipline’s need for leaders, to nurture and grow teams. As a relatively new field of expertise, the opportunities to develop as a UX leader are tremendous.</p>
<p>Leadership is a skill and — like any skill — it can be learned. As I’ve noted throughout this series of articles, one of the best places to learn is to look to other disciplines for guidance, widening the frame of reference. When we consider leadership, this is certainly true.</p>
<p>There is a great deal we can learn from the world of business, and websites like <a href="https://hbr.org">Harvard Business Review</a> (HBR), <a href="https://www.mckinsey.com/quarterly/overview">McKinsey Quarterly</a>, and <a href="https://www.fastcompany.com/">Fast Company</a> — amongst many, many others — offer us a wealth of insight.</p>
<p>There’s never been a more exciting time to work in User Experience design. UX has the potential to impact on so many facets of life, and the world is crying out for leaders to step up and lead the charge. I’d encourage anyone eager to learn and to grow to undertake a skills audit, take the first step, and embark on the journey into leadership. Leadership is a privilege, rich with rewards, and is something I’d strongly encourage exploring.</p>
<h4 id="suggested-reading">Suggested Reading</h4>
<p>There are many great publications, offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.</p>
<ul>
<li>The Harvard Business Review website is an excellent starting point and its guide, <a href="https://amzn.to/2Gk5F1P">HBR’s 10 Must Reads on Leadership</a>, provides an excellent overview on developing leadership qualities.</li>
<li>Peter Drucker’s writing on leadership is also well worth reading. Drucker has written many books, one I would strongly recommend is <a href="https://amzn.to/2JohVML">Managing Oneself</a>. It’s a short (but very powerful) read, and I read it at least two or three times a year.</li>
<li>If you’re serious about enhancing your leadership credentials, Michael D. Watkins’s <a href="https://amzn.to/2qbZrqX">The First 90 Days: Proven Strategies for Getting Up to Speed Faster and Smarter</a>, provides a comprehensive insight into transitioning into leadership roles.</li>
<li>Finally, HBR’s website — mentioned above — is definitely worth bookmarking. Its business-focused flavor offers designers a different perspective on leadership, which is well worth becoming acquainted with.</li>
</ul>
<p><em>This article is part of the UX design series sponsored by Adobe. <a href="https://adobe.ly/2hIKOtZ">Adobe XD is made for a fast and fluid UX design process</a>, 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 <a href="https://www.behance.net/galleries/adobe/5/XD">Adobe XD on Behance</a>, and also <a href="https://adobe.ly/2yKueO8">sign up for the Adobe experience design newsletter</a> to stay updated and informed on the latest trends and insights for UX/UI design.</em></p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(ra, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Alice Кotlyarenko</author>
<title>How To Design Emotional Interfaces For Boring Apps</title>
<link>https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/</link>
<pubDate>Tue, 10 Apr 2018 13:20:05 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/</guid>
<description>There’s a trickling line of ones and zeros that disappears behind a large yellow tube. A bear pops out of the tube as a clawed paw starts pointing at my browser’s toolbar, and a headline appears, saying: “Start your bear-owsing!”
Between my awwing and oohing I forget what I wanted to browse.
Products like a VPN service rarely evoke endearment — or any other emotion, for that matter. It’s not their job, not what they were built to do.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/" />
<title>How To Design Emotional Interfaces For Boring Apps</title>
</head>
<body>
<article>
<header>
<h1>How To Design Emotional Interfaces For Boring Apps</h1>
<address>Alice Кotlyarenko</address>
<time datetime="2018-04-10T13:20:05+02:00" class="op-published">2018-04-10T13:20:05+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>There’s a trickling line of ones and zeros that disappears behind a large yellow tube. A bear pops out of the tube as a clawed paw starts pointing at my browser’s toolbar, and a headline appears, saying: “Start your bear-owsing!”</p>
<p>Between my awwing and oohing I forget what I wanted to browse.</p>
<p>Products like a VPN service rarely evoke endearment — or any other emotion, for that matter. It’s not their job, not what they were built to do. But because <a href="https://www.tunnelbear.com/">TunnelBear</a> does, I choose it over any other VPN and recommend it to my friends, so they can have some laughs while caught up in routine.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c1a1241-ecb4-41be-96ef-c4f5df5ad162/tunnelbear.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c1a1241-ecb4-41be-96ef-c4f5df5ad162/tunnelbear.gif" width="800" alt="tunnelbear" /></a></figure>
<p>Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, <a href="http://www.apa.org/monitor/2013/07-08/dull-moment.aspx">the unfulfilled desire for satisfying activity</a>. So what if we use the interface to give them that stimulation?</p>
<p>I sat with product designers here at MacPaw, who spend their waking hours designing not-so-sexy things like duplicate finders and encryption apps, and they shared five secrets to more emotional UIs: gamification, humor, animation, illustration, and mascots.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Nope, we can't do any magic tricks, but we have articles, <a href="https://www.smashingmagazine.com/books">books</a> and <a href="https://www.smashingmagazine.com/smashing-tv/">webinars</a> featuring techniques we all can use to improve our work. <a href="https://www.smashingmagazine.com/membership/?utm_medium=panel">Smashing Members</a> get a seasoned selection of magic front-end tricks — e.g. <strong>live designing sessions</strong> and perf audits, too. <em>Just sayin'</em>! ;-)</p>
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="btn btn--green btn--large">
Explore Smashing Wizardry →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-wizard.svg" alt="Smashing Cat, just preparing to do some magic stuff." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<h3 id="games-people-play">Games People Play</h3>
<p>There’s some debate going on around the use of gamification in UIs: <a href="https://people.uta.fi/~kljuham/2014-hamari_et_al-does_gamification_work.pdf">24 empirical studies</a>, for example, arrived at varying conclusions as to how effective it was. But then again, effectiveness depends on what you were trying to accomplish by designing those shiny achievement badges.</p>
<p>For many product creators, including <a href="https://www.smashingmagazine.com/2017/08/relationship-gamification-modern-persuasion/">Akar Sumset here</a>, the point of gamification is not letting users have fun per se — it’s gently pushing them towards certain behaviors via said fun. Achievements, ranks, leaderboards tap into the basic human need of esteem, trigger competitiveness, and supposedly urge users to do what you want them to, like make progress, keep coming back to the app, or share it on social media.</p>
<p>Gamification can succeed or fail at that, but what it sure achieves is an emotional response. Our brain is packed full of cells that control the levels of dopamine, one of the major <a href="https://www.psychologytoday.com/blog/the-athletes-way/201211/the-neurochemicals-happiness">neurochemicals of happiness</a>. When something enjoyable happens, these neurons light up and trigger a release of dopamine into the blood, but what’s even better, if this pleasant event is regular and can be predicted, they’ll light up and release dopamine before it even happens. What does that mean for your interface? That expecting an enjoyable thing such as the next achievement will give the users little shots of happiness throughout their experience with the product.</p>
<h4 id="gamification-in-ui-gemini-2-and-duolingo">Gamification in UI: Gemini 2 And Duolingo</h4>
<p>When designing <a href="https://macpaw.com/gemini">Gemini 2</a>, the new version of our duplicate finder for Mac, we had a serious problem at hand. Reviewing gigabytes of files was soul-crushingly boring, and some users complained they quit before they were done. So what we tried to achieve with the achievements system is intensify the feeling of a crossed-out item on a to-do list, which is the only upside of tedious tasks. The space theme, unwittingly set with the app’s name and exploited in the interface, was perfect for gamification. Our audience grew up on Star Wars and Star Trek, so sci-fi inspired ranks would hit home with them.</p>
<p>Within days of the release, we started getting tweets from users asking for clues on the Easter Egg that would unlock the final achievement. A year after the release, Gemini 2 got <a href="https://red-dot.de/cd/en/online-exhibition/work/?code=15-03932&y=2017&c=256&a=0">the Red Dot Award</a> for a design that exhibits “clarity and emotion.” So while it’s hard to measure how motivating our achievement system has been, it sure didn’t leave people cold.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8881733-5d1e-4444-95cb-30d994b278cb/designing-emotional-ui-gemini.jpg"
sizes="100vw"
alt="Gamification in UI: Gemini 2"
/>
</a>
</figure>
<p>Another product that got it right — and has by far the most gamified interface I’ve seen — is <a href="https://www.duolingo.com/">Duolingo</a>, an online service and mobile app for learning languages. Trying to master a foreign tongue from scratch is daunting, especially if it’s just you and your laptop, without the reassurance that comes with having a teacher. Given how quickly people lose interest in their language endeavors (speaking from experience here), Duolingo would have to go out of its way to keep you hooked. And it does.</p>
<p>Whenever you complete a quick 5-minute lesson, you earn 10 points. Take lessons 30 days in a row? Get an achievement. Complete 20 lessons without a single typo? Unlock another. For every baby step you take, your senses are rewarded with triumphant sounds and colorful graphics that trigger the release of that sweet, sweet dopamine. Eventually, you start associating Duolingo with the feeling of accomplishment and pride — the kind of feeling you want to come back to.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b99de54-9681-48bc-8dce-9d95ee43c496/designing-emotional-ui-duolingo.png"
sizes="100vw"
alt="Gamification in UI: Duolingo"
/>
</a>
</figure>
<p>If you’d like to dive deeper into gamification, Gabe Zichermann’s book “<a href="https://www.amazon.com/Gamification-Design-Implementing-Mechanics-Mobile/dp/1449397670">Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps</a>” is a great way to start.</p>
<h3 id="you-ve-got-to-be-joking">You’ve Got To Be Joking</h3>
<p>Victor Yocco has made a solid case for <a href="https://www.smashingmagazine.com/2017/06/connecting-users-humor-web-design/">using humor in web design</a> as a tool to create memorable experiences, connect with users, and make your work stand out. But the biggest power of jokes is that they’re emotional. While we still don’t fully understand the nature of humor, one thing is clear: it makes humans happy. According to <a href="https://archive.org/stream/psychologyofhumo00martrich/psychologyofhumo00martrich_djvu.txt">brain imaging research</a>, funny cartoons activate the reward network in the limbic system — the same network that responds to eating, music, sex, and mood-altering drugs. In other words, a good joke gives people a kind of emotional high.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>Would you want that kind of reaction to your interface? Of course. But the tricky part is that not only is humor subjective, but the way we respond to it depends a lot on the context. One thing is throwing in a pun on the launch screen; a completely different is goofing around in an error message. And while all humans enjoy humor in this or that form, it’s vital to know your audience: what they find hilarious and what might seem inappropriate, crude, or poorly timed. Not that different from cracking jokes in real life.</p>
<h4 id="humor-in-ui-authentic-weather-and-slack">Humor in UI: Authentic Weather and Slack</h4>
<p>One app that nails the use of humor — and not just as a complementary comic relief, but as a unique selling proposition — is <a href="http://authenticweather.com/">Authentic Weather</a>. Weather apps are a prime example of utilitarian products: they are something people use to get information, period. But with Authentic Weather, you get a lot more than that. No matter the weather, it’s going to crack you up with a snarky comment like “It’s ducking freezing,” “Go home winter,” and my personal favorite “It’s just okay. Look outside for more information.”</p>
<p>What happens when you use Authentic Weather is you don’t just open it for the forecast — you want to see what it comes up with next, and a routine task like checking the weather becomes a thing to look forward to in the morning. Now, the app’s moody commentary, packed full of f-words and scorn, would probably seem less entertaining to my mom. But being the grumpy millennial that I am, I find it hilarious, which proves humor works if you know your audience.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7891860-add1-4beb-86d2-c9dcabe08420/designing-emotional-ui-authentic-weather.jpg"
sizes="100vw"
alt="Humor in UI: Authentic Weather"
/>
</a>
</figure>
<p>Another interface that puts fun to good use is Slack’s. For an app people associate with work emergencies, Slack does a solid job creating <a href="https://slackhq.com/making-work-tools-feel-more-human-so-people-can-thrive-cf013c19a7e0">a more humane experience</a>, not least because of its one-liners. From loading screens to the moments when you’re finally caught up with all your chats, it cracks a joke when you don’t see it coming.</p>
<p>With such a diverse demographic, humor is a hit and miss, so Slack plays safe with goofy puns and good-natured banter — the kind of jokes that don’t exactly send you rolling on the floor but don’t annoy or offend either. In the best case scenario, the user will chuckle and share the screenshot in one of their channels; in the worst case scenario, they’ll just roll their eyes.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7248d107-dd27-45fa-a4d3-04afa4a9e682/designing-emotional-ui-slack-humor-example.jpg"
sizes="100vw"
alt="Humor in UI: Slack"
/>
</a>
</figure>
<p>More on Humor: “<a href="https://www.amazon.com/Just-Kidding-Using-Humor-Effectively/dp/144221337X">Just Kidding: Using Humor Effectively</a>” by Louis R. Franzini.</p>
<h3 id="get-the-world-moving">Get The World Moving</h3>
<p>Nearly every interface uses a form of animation. It’s the natural way to transition from one state to another. But animations in UI can serve a lot more purposes than signifying a change of state — they can help you direct attention and communicate what’s going on better than static visuals or copy ever could. The movement stimulates both <a href="https://www.southwesterncc.edu/sites/default/files/VAK_Learning_Styles.pdf">visual and kinesthetic learning</a>, which means users are more likely to stay focused and figure out how to use the thing.</p>
<p>These are all good reasons to incorporate animation into your design, but why does it elicit emotion, exactly? Simon Grozyan, who worked on our apps Encrypto and Gemini Photos, believes it’s because in the physical world we interpret animated things as alive:</p>
<blockquote>“We are used to seeing things in movement. Everything around us is either moving or changing appearance because of the light. Static equals dead.”</blockquote>
<p>In addition to the relatable, lifelike quality of a moving object, animation has the power of a delightful and unexpected thing that brings us <a href="http://www.ccnl.emory.edu/greg/Koolaid_JN_Print.pdf">a lot more pleasure</a> than a thing equally delightful but expected. Therefore, by using it in spots less habitual than transitions you can achieve that coveted stimulation that makes your product fun to use.</p>
<h4 id="animation-in-ui-encrypto-and-shazam">Animation in UI: Encrypto and Shazam</h4>
<p><a href="https://macpaw.com/encrypto">Encrypto</a> is a tiny Mac app that encrypts and decrypts your files so that you can send them to someone securely. It’s an indispensable tool for those who care about data security and privacy, but not the kind of tool you would feel attached to. Nevertheless, Encrypto is by far my favorite MacPaw app as far as design is concerned, thanks to the Matrix-style animated bar that slides over your file and transforms it into a new secured entity. Encryption comes to life; it’s no longer a dull process on your computer — it’s mesmerizing digital magic.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1211b718-bd96-4a01-8345-f871837cfeef/encrypto.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1211b718-bd96-4a01-8345-f871837cfeef/encrypto.gif" width="800" alt="encrypto" /></a></figure>
<p>Animation is at the heart of another great UI: that of <a href="https://www.shazam.com/">Shazam</a>, an app you probably have on your phone. When you use Shazam to find out what’s playing, the button you tap starts sending concentric circles outward and inward. This similarity to a throbbing audio speaker makes the interface almost tangible, physical — as if you’re blasting your favorite album on a powerful sound system.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e029d0-a095-40ff-8d47-70a3b270e60b/shazam.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3e029d0-a095-40ff-8d47-70a3b270e60b/shazam.gif" width="800" alt="shazam" /></a></figure>
<p>More on Animation: “<a href="https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/">How Functional Animation Helps Improve User Experience</a>”.</p></p>
<h3 id="art-is-everywhere">Art Is Everywhere</h3>
<p>As <a href="https://www.smashingmagazine.com/2017/05/emotional-design-illustrations/">Blair Culbreth argues</a>, polished is no longer enough for interfaces. Sleek, professional design is expected, but it’s the personalized, humane details that users smile at and forward to their friends. Custom art can be this detail.</p>
<p>Unlike generic imagery, illustration is emotional, because it communicates more than meaning. It carries positive associations with cartoons every person used to watch as a child, shows things in a more playful, imaginative way, and, most importantly, contains a touch of the artist’s personality.</p>
<p>“I think when an artist creates an illustration they always infuse some of their personal experience, their context, their story into it,” says Max Kukurudziak, one of our product designers. The theory rings true — a human touch is more likely to stir feelings.</p>
<h4 id="illustration-in-ui-gemini-photos-and-google-calendar">Illustration in UI: Gemini Photos and Google Calendar</h4>
<p>One of our newest products <a href="https://gemini.macpaw.com/photos/1">Gemini Photos</a> is an iPhone app that helps you clear unneeded photos. Much like Gemini 2 for desktop, it involves some tedious reviewing for the user, so even with a handy and handsome UI, we’d have a hard time holding their attention and generally making them feel good.</p>
<p>Like in many of our previous apps, we used animations and sounds to enliven the interface, but custom art has become the highlight of the experience. As said above, it’s scientifically proven that surprising pleasurable things cause an influx of that happiness chemical into our blood, so by using quirky illustrations in unexpected spots we didn’t just fill up an empty screen — we added a tad of enjoyment to an otherwise monotonous activity.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/76447f0d-f64d-4565-aab2-b9cd0d238e4c/designing-emotional-ui-gemini-photos.jpg"
sizes="100vw"
alt="Illustration in UI: Gemini Photos"
/>
</a>
</figure>
<p>One more example of how illustration can make a product more lovable is <a href="https://itunes.apple.com/us/app/google-calendar/id909319292?mt=8">Google Calendar</a>. Until recently there was a striking difference between the web version and the iOS app. While the former had the appeal of a spreadsheet, the latter instantly won my heart with one killer detail. For many types of events, Google Calendar slips in art that illustrates them, based on the keywords it picks up from event titles. That way, your plans for the week look a lot more exciting, even if all you’ve got going on is the gym and a dentist appointment.</p>
<p>But that’s not even the best thing. I realized that whenever I create a new event, I secretly hope Google Calendar will have art for it and feel genuinely pleased when it does. Just like that, using a calendar stopped being a necessity and became a source of positive emotion. And, apparently, the illustration experiment didn’t work for me alone, because Google recently rolled out the web version of their calendar with the same art.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7e74e9ad-fb74-41ff-a02d-64579734f743/designing-emotional-ui-google-calendar.jpg"
sizes="100vw"
alt="Illustration in UI: Google Calendar"
/>
</a>
</figure>
<p>More on Illustration: “<a href="https://www.amazon.com/Illustration-that-Works-Professional-Techniques/dp/1580934471/">Illustration That Works: Professional Techniques For Artistic And Commercial Success</a>” by Greg Houston.</p>
<h3 id="what-a-character">What A Character</h3>
<p>Cute characters that impersonate products have been used in <a href="https://www.smashingmagazine.com/2008/01/isnt-it-sweet-mascots-in-modern-web-design/">web design</a> and marketing for years (think Ronald McDonald and the Michelin Man). In interfaces — not quite as much. Mascots in UI can be perceived as intrusive and annoying, especially if they distract the user from an important action or obstruct the view. A notorious example of a mascot gone wrong is Microsoft’s Clippy: it <a href="https://www.theatlantic.com/technology/archive/2015/06/clippy-the-microsoft-office-assistant-is-the-patriarchys-fault/396653/">evoked nothing but fear and loathing</a> (which, of course, are emotions, but not the kind you’re looking for).</p>
<p>At the same time, <a href="https://www.all-about-psychology.com/fritz-heider.html">studies show</a> that people easily personify things, even if they are merely geometric figures. Lifelike creatures are easier to relate to, understand the behavior of, and generally feel some way about. Moreover, an animated character is easier to attribute a personality to, so you can broadcast the characteristics of your product through that character — make it playful and goofy, eager and helpful, or whatever you need it to be. With that much-untapped potential, mascots are perfect for non-emotional products.</p>
<p>The trick is timing.</p>
<p>Clippy was so obnoxious because he appeared uninvited, interrupted completely unrelated tasks, and was generally in the way. But if the mascot shows up in a relatively idle moment — for example, the user has just completed a task — it will do its endearing job.</p>
<h4 id="mascots-in-ui-remembear-and-yelp">Mascots in UI: RememBear and Yelp</h4>
<p>TunnelBear Inc. has recently beta launched another utility that’s cute as a button (no pun intended). <a href="https://www.remembear.com/">RememBear</a> is a password manager, and passwords are supposed to be no joke. But the brilliance of bear cartoons in RememBear is that they are nowhere in sight when you do serious, important things like creating a new entry. Instead, you get a bear hug when you’re done with stage one of signing up for the app and haven’t yet proceeded to stage two — saving your first password. By placing the mascot in this spot, RememBear avoided being in the way but made me smile when I least expected it.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e66ca8ba-c927-4256-b361-11dbfc36603d/designing-emotional-ui-remembear.jpg"
sizes="100vw"
alt="Mascots in UI: RememBear"
/>
</a>
</figure>
<p>Just like RememBear, <a href="https://itunes.apple.com/nz/app/yelp/id284910350">Yelp</a> — a widely known app for restaurant reviews — has perfect timing for their mascot. The funny hamster first appeared at the bottom of the iOS app’s settings so that the user would discover it like an Easter egg.</p>
<p>“At Yelp we’re always striving to make our product and brand feel fun and delightful,” <a href="https://www.quora.com/Yelp-product/Why-does-the-Yelp-iOS-app-use-hamsters-in-their-loading-animations-and-error-screens">says Yoni De Beule</a>, Yelp’s Product Design manager. “We reflect Yelp’s personality in everything from our fun poster designs and funny release notes to internal hackathon projects and Yelp Elite parties. When we found our iPhone settings page to be seriously lacking in the fun department, we decided to roll up our sleeves and fix it.”</p>
<p>The hamster in the iOS app later got company, as the team designed a velociraptor for the Android version and a dog for the web. So whenever — and wherever — you use Yelp, you almost want to run out of recommendations, so that you can see another version of the delightful character.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b689ade-c665-46e8-bcbb-f5ddacf3359d/designing-emotional-design-yelp-mascot.jpg"
sizes="100vw"
alt="Mascots in UI: Yelp"
/>
</a>
</figure>
<p>If you’d like to learn how to create your own mascot, there’s a nice <a href="https://design.tutsplus.com/tutorials/how-to-create-a-mascot--cms-25937">tutorial</a> by Sirine (aka ‘Miss ChatZ’) on Envato Tuts+.</p>
<h3 id="to-wrap-it-up">To Wrap It Up…</h3>
<p>Not all products are inherently fun the way games, or social media apps are, but even utilities don’t have to be merely utilitarian. Apps that deal with repetitive tasks often struggle with retaining users: people abandon them because they feel bored, and boredom is simply lack of stimulation. By using positive stimuli like humor, movement, unique art, elements of game, and relatable characters we can make users feel a different way — more excited, less distracted, and ultimately happier.</p>
<h4 id="further-reading">Further Reading</h4>
<ul>
<li>“<a href="https://www.amazon.com/Emotional-Design-Love-Everyday-Things/dp/0465051367">Emotional Design: Why We Love (Or Hate) Everyday Things</a>,” Don Norman</li>
<li>“<a href="https://www.amazon.com/Seductive-Interaction-Design-Effective-Experiences/dp/0321725522">Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences (Voices That Matter)</a>,” Stephen P. Anderson</li>
</ul>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(cc, ra, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Steven Lambert</author>
<title>Designing For Accessibility And Inclusion</title>
<link>https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/</link>
<pubDate>Mon, 09 Apr 2018 14:45:39 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/</guid>
<description>“Accessibility is solved at the design stage.” This is a phrase that Daniel Na and his team heard over and over again while attending a conference. To design for accessibility means to be inclusive to the needs of your users. This includes your target users, users outside of your target demographic, users with disabilities, and even users from different cultures and countries. Understanding those needs is the key to crafting better and more accessible experiences for them.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/" />
<title>Designing For Accessibility And Inclusion</title>
</head>
<body>
<article>
<header>
<h1>Designing For Accessibility And Inclusion</h1>
<address>Steven Lambert</address>
<time datetime="2018-04-09T14:45:39+02:00" class="op-published">2018-04-09T14:45:39+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>“Accessibility is solved at the design stage.” This is a phrase that <a href="http://blog.danielna.com/2017/09/14/creating-an-accessibility-engineering-practice.html#accessibility-is-solved-at-the-design-stage">Daniel Na</a> and his team heard over and over again while attending a conference. To design for accessibility means to <strong>be inclusive to the needs of your users</strong>. This includes your target users, users outside of your target demographic, users with disabilities, and even users from different cultures and countries. Understanding those needs is the key to crafting better and more accessible experiences for them.</p>
<p>One of the most common problems when designing for accessibility is knowing what needs you should design for. It’s not that we intentionally design to exclude users, it’s just that “<a href="https://twitter.com/MikeOzzy/status/930007559532138497">we don’t know what we don’t know</a>.” So, when it comes to accessibility, there’s a lot to know.</p>
<p>How do we go about understanding the myriad of users and their needs? How can we ensure that their needs are met in our design? To answer these questions, I have found that it is helpful to apply a critical analysis technique of viewing a design through different lenses.</p>
<blockquote>“Good [accessible] design happens when you view your [design] from many different perspectives, or lenses.”<br /><br />— <a href="https://www.goodreads.com/book/show/3396933-the-art-of-game-design">The Art of Game Design: A Book of Lenses</a></blockquote>
<p>A <a href="https://edpioneer.com/understanding-perspectives/">lens</a> is “a narrowed filter through which a topic can be considered or examined.” Often used to examine works of art, literature, or film, lenses ask us to leave behind our worldview and instead view the world through a different context.</p>
<p>For example, <a href="http://www.mpsaz.org/rmhs/staff/rkcupryk/aa_jr/files/microsoft_word_-_literary_theories.pdf">viewing art through a lens of history</a> asks us to understand the “social, political, economic, cultural, and/or intellectual climate of the time.” This allows us to better understand what world influences affected the artist and how that shaped the artwork and its message.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p>Nope, we can't do any magic tricks, but we have articles, <a href="https://www.smashingmagazine.com/books">books</a> and <a href="https://www.smashingmagazine.com/smashing-tv/">webinars</a> featuring techniques we all can use to improve our work. <a href="https://www.smashingmagazine.com/membership/?utm_medium=panel">Smashing Members</a> get a seasoned selection of magic front-end tricks — e.g. <strong>live designing sessions</strong> and perf audits, too. <em>Just sayin'</em>! ;-)</p>
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="btn btn--green btn--large">
Explore Smashing Wizardry →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/?utm_medium=panel" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-wizard.svg" alt="Smashing Cat, just preparing to do some magic stuff." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>Accessibility lenses are a filter that we can use to understand how different aspects of the design affect the needs of the users. Each lens presents a set of questions to ask yourself throughout the design process. By using these lenses, you will become more inclusive to the needs of your users, allowing you to design a more accessible user experience for all.</p>
<p>The <em>Lenses of Accessibility</em> are:</p>
<ul>
<li><a href="#lens-animation-effects">Lens of Animation and Effects</a></li>
<li><a href="#lens-audio-video">Lens of Audio and Video</a></li>
<li><a href="#lens-color">Lens of Color</a></li>
<li><a href="#lens-controls">Lens of Controls</a></li>
<li><a href="#lens-font">Lens of Font</a></li>
<li><a href="#lens-images-icons">Lens of Images and Icons</a></li>
<li><a href="#lens-keyboard">Lens of Keyboard</a></li>
<li><a href="#lens-layout">Lens of Layout</a></li>
<li><a href="#lens-material-honesty">Lens of Material Honesty</a></li>
<li><a href="#lens-readability">Lens of Readability</a></li>
<li><a href="#lens-structure">Lens of Structure</a></li>
<li><a href="#lens-time">Lens of Time</a></li>
</ul>
<p>You should know that not every lens will apply to every design. While some can apply to every design, others are more situational. What works best in one design may not work for another.</p>
<p>The questions provided by each lens are merely a tool to help you understand what problems may arise. As always, you should test your design with users to ensure it’s usable and accessible to them.</p>
<h3 id="lens-animation-effects">Lens Of Animation And Effects</h3>
<p>Effective animations can help bring a page and brand to life, guide the users focus, and help orient a user. But animations are a double-edged sword. Not only can misusing animations cause confusion or be distracting, but they can also be potentially deadly for some users.</p>
<p>Fast flashing effects (defined as flashing more than three times a second) or high-intensity effects and patterns can cause seizures, known as ‘<a href="https://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">photosensitive epilepsy</a>.’ Photosensitivity can also cause headaches, nausea, and dizziness. Users with photosensitive epilepsy have to be very careful when using the web as they <a href="https://www.cnn.com/2017/03/17/us/twitter-journalist-strobe-epilepsy/index.html">never know when something might cause a seizure</a>.</p>
<p>Other effects, such as parallax or motion effects, can cause some users to feel dizzy or experience vertigo due to <a href="http://vestibular.org/understanding-vestibular-disorder">vestibular sensitivity</a>. The vestibular system controls a person’s balance and sense of motion. When this system doesn’t function as it should, <a href="https://source.opennews.org/articles/motion-sick/">it causes dizziness and nausea</a>.</p>
<blockquote>“Imagine a world where your internal gyroscope is not working properly. Very similar to being intoxicated, things seem to move of their own accord, your feet never quite seem to be stable underneath you, and your senses are moving faster or slower than your body.”<br /><br />— <a href="https://a11yproject.com/posts/understanding-vestibular-disorders/">A Primer To Vestibular Disorders</a></blockquote>
<p>Constant animations or motion can also be distracting to users, especially to users who have difficulty concentrating. GIFs are notably problematic as our eyes are drawn towards movement, making it easy to be distracted by anything that updates or moves constantly.</p>
<p>This isn’t to say that animation is bad and you shouldn’t use it. Instead you should understand why you’re using the animation and <a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">how to design safer animations</a>. Generally speaking, you should try to design animations that cover small distances, match direction and speed of other moving objects (including scroll), and are relatively small to the screen size.</p>
<p>You should also provide controls or options to cater the experience for the user. For example, <a href="https://get.slack.help/hc/en-us/articles/228023907-Manage-animated-images-and-emoji">Slack lets you hide animated images or emojis</a> as both a global setting and on a per image basis.</p>
<p>To use the <em>Lens of Animation and Effects</em>, ask yourself these questions:</p>
<ul>
<li>Are there any effects that could cause a seizure?</li>
<li>Are there any animations or effects that could cause dizziness or vertigo through use of motion?</li>
<li>Are there any animations that could be distracting by constantly moving, blinking, or auto-updating?</li>
<li>Is it possible to provide controls or options to stop, pause, hide, or change the frequency of any animations or effects?</li>
</ul>
<h3 id="lens-audio-video">Lens Of Audio And Video</h3>
<p>Autoplaying videos and audio can be pretty annoying. Not only do they break a users concentration, but they also force the user to hunt down the offending media and mute or stop it. As a general rule, don’t autoplay media.</p>
<blockquote>“Use autoplay sparingly. Autoplay can be a powerful engagement tool, but it can also annoy users if undesired sound is played or they perceive unnecessary resource usage (e.g. data, battery) as the result of unwanted video playback.”<br /><br />— <a href="https://sites.google.com/a/chromium.org/dev/audio-video/autoplay">Google Autoplay guidelines</a></blockquote>
<p>You’re now probably asking, “But what if I autoplay the video in the background but keep it muted?” While <a href="https://envato.com/blog/video-backgrounds-web-design-trends-usability-best-practices/">using videos as backgrounds</a> may be a growing trend in today’s web design, background videos suffer from the same problems as GIFs and constant moving animations: they can be distracting. As such, you should provide controls or options to pause or disable the video.</p>
<p>Along with controls, videos should have transcripts and/or subtitles so users can consume the content in a way that works best for them. Users who are visually impaired or who would rather read instead of watch the video need a transcript, while users who aren’t able to or don’t want to listen to the video need subtitles.</p>
<p>To use the <em>Lens of Audio and Video</em>, ask yourself these questions:</p>
<ul>
<li>Are there any audio or video that could be annoying by autoplaying?</li>
<li>Is it possible to provide controls to stop, pause, or hide any audio or videos that autoplay?</li>
<li>Do videos have transcripts and/or subtitles?</li>
</ul>
<h3 id="lens-color">Lens Of Color</h3>
<p>Color plays an important part in a design. Colors evoke emotions, feelings, and ideas. Colors can also help strengthen a brand’s message and perception. Yet the power of colors is lost when a user can’t see them or perceives them differently.</p>
<p><a href="http://www.colourblindawareness.org/colour-blindness/">Color blindness affects roughly 1 in 12 men and 1 in 200 women</a>. Deuteranopia (red-green color blindness) is the most common form of color blindness, affecting about 6% of men. Users with red-green color blindness typically perceive reds, greens, and oranges as yellowish.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png"
sizes="100vw"
alt="Color Blindness Reference Chart for Deuternaopia, Protanopia, and Tritanopia"
/>
</a>
<figcaption class="op-vertical-bottom">
Deuteranopia (green color blindness) is common and causes reds to appear brown/yellow and greens to appear beige. Protanopia (red color blindness) is rare and causes reds to appear dark/black and orange/greens to appear yellow. Tritanopia (blue-yellow colorblindness) is very rare and cases blues to appear more green/teal and yellows to appear violet/grey. (<a href='https://twitter.com/Waynhim/status/900995855242723328'>Source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/315bfb2b-5b83-4425-979e-a035f98f910a/color-blindness-reference-chart.png'>Large preview</a>)
</figcaption>
</figure>
<p>Color meaning is also problematic for international users. <a href="https://www.shutterstock.com/blog/color-symbolism-and-meanings-around-the-world">Colors mean different things in different countries and cultures</a>. In Western cultures, red is typically used to represent negative trends and green positive trends, but <a href="https://graphicdesign.stackexchange.com/questions/6982/except-china-which-country-will-use-red-for-up-and-green-for-down">the opposite is true in Eastern and Asian cultures</a>.</p>
<p>Because colors and their meanings can be lost either through cultural differences or color blindness, you should always add a non-color identifier. Identifiers such as icons or text descriptions can help bridge cultural differences while patterns work well to distinguish between colors.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png"
sizes="100vw"
alt="Six colored labels. Five use a pattern while the sixth doesn’t"
/>
</a>
<figcaption class="op-vertical-bottom">
Trello’s color blind friendly labels use different patterns to distinguish between the colors. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f355159-414f-4c39-a42e-fe859a1827fb/trello-colorblind-labels.png'>Large preview</a>)
</figcaption>
</figure>
<p>Oversaturated colors, high contrasting colors, and even just the color yellow can be <a href="http://autismcauses1.com/tag/aspergers-syndrome">uncomfortable and unsettling for some users</a>, prominently those on the autism spectrum. It’s best to avoid high concentrations of these types of colors to help users remain comfortable.</p>
<p>Poor contrast between foreground and background colors make it harder to see for users with low vision, using a low-end monitor, or who are just in direct sunlight. All text, icons, and any focus indicators used for users using a keyboard should meet a <a href="https://webaim.org/resources/contrastchecker/">minimum contrast ratio</a> of 4.5:1 to the background color.</p>
<p>You should also ensure your design and colors work well in different settings of <a href="https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/">Windows High Contrast mode</a>. A common pitfall is that text becomes invisible on certain high contrast mode backgrounds.</p>
<p>To use the <em>Lens of Color</em>, ask yourself these questions:</p>
<ul>
<li>If the color was removed from the design, what meaning would be lost?</li>
<li>How could I provide meaning without using color?</li>
<li>Are any colors oversaturated or have high contrast that could cause users to become overstimulated or uncomfortable?</li>
<li>Does the foreground and background color of all text, icons, and focus indicators meet contrast ratio guidelines of 4.5:1?</li>
</ul>
<h3 id="lens-controls">Lens Of Controls</h3>
<p>Controls, also called ‘<a href="https://w3c.github.io/html/dom.html#interactive-content-2">interactive content</a>,’ are any UI elements that the user can interact with, be they buttons, links, inputs, or any HTML element with an event listener. Controls that are too small or too close together can cause lots of problems for users.</p>
<p>Small controls are hard to click on for users who are unable to be accurate with a pointer, such as those with tremors, or those who suffer from reduced dexterity due to age. The default size of checkboxes and radio buttons, for example, can pose problems for older users. Even when a label is provided that could be clicked on instead, <a href="http://uxmovement.com/forms/why-you-should-add-hover-effects-to-your-checkboxes/">not all users know they can do so</a>.</p>
<p>Controls that are too close together can cause problems for touch screen users. Fingers are big and difficult to be precise with. Accidentally touching the wrong control can cause frustration, especially if that control navigates you away or makes you lose your context.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png"
sizes="100vw"
alt="Tweet that says Software being Done is like lawn being Mowed. Jim Benson"
/>
</a>
<figcaption class="op-vertical-bottom">
When touching a single line tweet, it’s very easy to accidentally click the person’s name or handle instead of opening the tweet because there’s not enough space between them. (<a href='https://twitter.com/CodeWisdom/status/950789387960406016'>Source</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da3bf595-1c65-49f6-a1f9-340b07220c11/programming-wisdom-tweet.png'>Large preview</a>)
</figcaption>
</figure>
<p>Controls that are nested inside another control can also contribute to touch errors. <a href="https://w3c.github.io/html/textlevel-semantics.html#the-a-element">Not only is it not allowed in the HTML spec</a>, it also makes it easy to accidentally select the parent control instead of the one you wanted.</p>
<p>To give users enough room to accurately select a control, <a href="https://www.lukew.com/ff/entry.asp?1085">the recommended minimum size</a> for a control is 34 by 34 device independent pixels, but <a href="https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design">Google recommends at least 48 by 48 pixels</a>, while the <a href="https://www.w3.org/TR/WCAG21/#target-size">WCAG spec recommends at least 44 by 44 pixels</a>. This size also includes any padding the control has. So a control could visually be 24 by 24 pixels but with an additional 10 pixels of padding on all sides would bring it up to 44 by 44 pixels.</p>
<p>It’s also recommended that controls be placed far enough apart to reduce touch errors. Microsoft recommends at least 8 pixels of spacing while Google recommends controls be spaced at least 32 pixels apart.</p>
<p>Controls should also have a visible text label. Not only do screen readers require the text label to know what the control does, but it’s been shown that <a href="https://www.nngroup.com/articles/icon-usability/">text labels help all users better understand a controls purpose</a>. This is especially important for form inputs and icons.</p>
<p>To use the <em>Lens of Controls</em>, ask yourself these questions:</p>
<ul>
<li>Are any controls not large enough for someone to touch?</li>
<li>Are any controls too close together that would make it easy to touch the wrong one?</li>
<li>Are there any controls inside another control or clickable region?</li>
<li>Do all controls have a visible text label?</li>
</ul>
<h3 id="lens-font">Lens Of Font</h3>
<p>In the early days of the web, we designed web pages with a <a href="https://blog.usejournal.com/your-body-text-is-too-small-5e02d36dc902">font size between 9 and 14 pixels</a>. This worked out just fine back then as monitors had a relatively known screen size. We designed thinking that <a href="https://resilientwebdesign.com/chapter3/">the browser window was a constant</a>, something that couldn’t be changed.</p>
<p>Technology today is very different than it was 20 years ago. Today, browsers can be used on any device of any size, from a small watch to a huge 4K screen. We can no longer use fixed font sizes to design our sites. Font sizes must be as responsive as the design itself.</p>
<p>Not only should the font sizes be responsive, but the design should be flexible enough to allow users to customize the font size, line height, or letter spacing to a comfortable reading level. Many users make use of <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/">custom CSS that helps them have a better reading experience</a>.</p>
<p>The font itself should be easy to read. You may be wondering if one font is more readable than another. The truth of the matter is that the font doesn’t really make a difference to readability. Instead it’s the font style that plays an important role in a fonts readability.</p>
<p><a href="https://webaim.org/techniques/fonts/">Decorative or cursive font styles</a> are harder to read for many users, but especially problematic for users with dyslexia. <a href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">Small font sizes, italicized text</a>, and all uppercase text are also difficult for users. Overall, larger text, shorter line lengths, taller line heights, and increased letter spacing can help all users have a better reading experience.</p>
<p>To use the <em>Lens of Font</em>, ask yourself these questions:</p>
<ul>
<li>Is the design flexible enough that the font could be modified to a comfortable reading level by the user?</li>
<li>Is the font style easy to read?</li>
</ul>
<h3 id="lens-images-icons">Lens Of Images and Icons</h3>
<p>They say, “A picture is worth a thousand words.” Still, a picture you can’t see is speechless, right?</p>
<p>Images can be used in a design to convey a specific meaning or feeling. Other times they can be used to simplify complex ideas. Whichever the case for the image, a user who uses a screen reader needs to be told what the meaning of the image is.</p>
<p>As the designer, you understand best the meaning or information the image conveys. As such, you should annotate the design with this information so it’s not left out or misinterpreted later. This will be used to create the alt text for the image.</p>
<p><a href="https://webaim.org/techniques/alttext/#context">How you describe an image depends entirely on context</a>, or how much textual information is already available that describes the information. It also depends on if the image is just for decoration, conveys meaning, or contains text.</p>
<blockquote>“You almost never describe what the picture looks like, instead you explain the information the picture contains.”<br /><br />— <a href="https://www.abilitynet.org.uk/blog/five-golden-rules-compliant-alt-text">Five Golden Rules for Compliant Alt Text</a></blockquote>
<p>Since knowing how to describe an image can be difficult, there’s a <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">handy decision tree</a> to help when deciding. Generally speaking, if the image is decorational or there’s surrounding text that already describes the image’s information, no further information is needed. Otherwise you should describe the information of the image. If the image contains text, repeat the text in the description as well.</p>
<p>Descriptions should be succinct. It’s recommended to use no more than two sentences, but aim for one concise sentence when possible. This allows users to quickly understand the image without having to listen to a lengthy description.</p>
<p>As an example, if you were to describe this image for a screen reader, what would you say?</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg"
sizes="100vw"
alt="Vincent van Gogh’s The Starry Night"
/>
</a>
<figcaption class="op-vertical-bottom">
<a href='https://commons.wikimedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg'>Source</a> (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff30883b-1087-4489-a568-bca7cfd87dfe/starry-night.jpg'>Large preview</a>)
</figcaption>
</figure>
<p>Since we describe the information of the image and not the image itself, the description could be Vincent van Gogh’s <em>The Starry Night</em> since there is no other surrounding context that describes it. What you shouldn’t put is a description of the style of the painting or what the picture looks like.</p>
<p>If the information of the image would require a lengthy description, such as a complex chart, you shouldn’t put that description in the alt text. Instead, you should still use a short description for the alt text and then provide the <a href="https://www.w3.org/WAI/tutorials/images/complex/">long description as either a caption or link to a different page</a>.</p>
<p>This way, users can still get the most important information quickly but have the ability to dig in further if they wish. If the image is of a chart, you should repeat the data of the chart just like you would for text in the image.</p>
<p>If the platform you are designing for allows users to upload images, you should provide a way for the user to enter the alt text along with the image. For example, <a href="https://blog.twitter.com/official/en_us/a/2016/accessible-images-for-everyone.html">Twitter allows its users to write alt text</a> when they upload an image to a tweet.</p>
<p>To use the <em>Lens of Images and Icons</em>, ask yourself these questions:</p>
<ul>
<li>Does any image contain information that would be lost if it was not viewable?</li>
<li>How could I provide the information in a non-visual way?</li>
<li>If the image is controlled by the user, is it possible to provide a way for them to enter the alt text description?</li>
</ul>
<h3 id="lens-keyboard">Lens Of Keyboard</h3>
<p>Keyboard accessibility is among the most important aspects of an accessible design, yet it is also among the most overlooked.</p>
<p>There are many reasons why a user would use a keyboard instead of a mouse. Users who use a screen reader use the keyboard to read the page. A user with tremors may use a keyboard because it provides better accuracy than a mouse. Even power users will use a keyboard because it’s faster and more efficient.</p>
<p>A user using a keyboard typically uses the tab key to navigate to each control in sequence. A logical order for the tab order greatly helps users know where the next key press will take them. In western cultures, this usually means from left to right, top to bottom. Unexpected tab orders results in users becoming lost and having to scan frantically for where the focus went.</p>
<p>Sequential tab order also means that they must tab through all controls that are before the one that they want. If that control is tens or hundreds of keystrokes away, it can be a real pain point for the user.</p>
<p>By making the most important user flows nearer to the top of the tab order, we can help enable our users to be more efficient and effective. However, this isn’t always possible nor practical to do. In these cases, providing a way to quickly jump to a particular flow or content can still allow them to be efficient. This is why “skip to content” links are helpful.</p>
<p>A good example of this is Facebook which <a href="https://a11ywins.tumblr.com/post/170270963528/facebook-ax-navbar">provides a keyboard navigation menu</a> that allows users to jump to specific sections of the site. This greatly speeds up the ability for a user to interact with the page and the content they want.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png"
sizes="100vw"
alt="facebook"
/>
</a>
<figcaption class="op-vertical-bottom">
Facebook provides a way for all keyboard users to jump to specific sections of the page, or other pages within Facebook, as well as an Accessibility Help menu. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4309dbcc-4568-4bfd-85dc-720ce4f386d6/facebook-a11y-menu.png'>Large preview</a>)
</figcaption>
</figure>
<p>When tabbing through a design, focus styles should always be visible or a user can easily become lost. Just like an unexpected tab order, not having good focus indicators results in users not knowing what is currently focused and having to scan the page.</p>
<p>Changing the look of the default focus indicator can sometimes improve the experience for users. A good focus indicator doesn’t rely on color alone to indicate focus (Lens of Color), and should be distinct enough to easily allow the user to find it. For example, a blue focus ring around a similarly colored blue button may not be visually distinct to discern that it is focused.</p>
<p>Although this lens focuses on keyboard accessibility, it’s important to note that it applies to any way a user could interact with a website without a mouse. Devices such as mouth sticks, switch access buttons, sip and puff buttons, and eye tracking software all require the page to be keyboard accessible.</p>
<p>By improving keyboard accessibility, you allow a wide range of users better access to your site.</p>
<p>To use the <em>Lens of Keyboard</em>, ask yourself these questions:</p>
<ul>
<li>What keyboard navigation order makes the most sense for the design?</li>
<li>How could a keyboard user get to what they want in the quickest way possible?</li>
<li>Is the focus indicator always visible and visually distinct?</li>
</ul>
<h3 id="lens-layout">Lens Of Layout</h3>
<p>Layout contributes a great deal to the usability of a site. Having a layout that is easy to follow with easy to find content makes all the difference to your users. A layout should have a meaningful and logical sequence for the user.</p>
<p>With the advent of CSS Grid, being able to change the layout to be more meaningful based on the available space is easier than ever. However, <a href="https://www.youtube.com/watch?v=8MAvH6vYbDo">changing the visual layout creates problems</a> for users who rely on the structural layout of the page.</p>
<p>The structural layout is what is used by screen readers and users using a keyboard. When the visual layout changes but not the underlying structural layout, these users can become confused as their tab order is no longer logical. If you must change the visual layout, you should do so by changing the structural layout so users using a keyboard maintain a sequential and logical tab order.</p>
<p>The layout should be resizable and flexible to a minimum of 320 pixels with no horizontal scroll bars so that it can be viewed comfortably on a phone. The layout should also be flexible enough to be zoomed in to 400% (also with no horizontal scroll bars) for users who need to increase the font size for a better reading experience.</p>
<p>Users using a screen magnifier <a href="https://dev.to/_bigblind/how-to-make-your-website-accessible-to-people-who-use-a-screen-magnifier">benefit when related content is in close proximity to one another</a>. A screen magnifier only provides the user with a small view of the entire layout, so content that is related but far away, or changes far away from where the interaction occurred is hard to find and can go unnoticed.</p>
<figure><a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/865d26b0-a12b-451d-83b1-377b6ebb884c/codepen-search.gif"><img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/865d26b0-a12b-451d-83b1-377b6ebb884c/codepen-search.gif" width="800" height="" alt="GIF of CodePen showing that clicking on a button does not update the interface" /></a><figcaption>When performing a search on CodePen, the search button is in the top right corner of the page. Clicking the button reveals a large search input on the opposite side of the screen. A user using a screen magnifier would be hard pressed to notice the change and would think the button doesn’t work. (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/865d26b0-a12b-451d-83b1-377b6ebb884c/codepen-search.gif">Large preview</a>)</figcaption></figure>
<p>To use the <em>Lens of Layout</em>, ask yourself these questions:</p>
<ul>
<li>Does the layout have a meaningful and logical sequence?</li>
<li>What should happen to the layout when it’s viewed on a small screen or zoomed in to 400%?</li>
<li>Is content that is related or changes due to user interaction in close proximity to one another?</li>
</ul>
<h3 id="lens-material-honesty">Lens Of Material Honesty</h3>
<p><a href="https://en.wikipedia.org/wiki/Architectural_design_values#The_structural,_functional_and_material_honesty_design_value">Material honesty is an architectural design value</a> that states that a material should be honest to itself and not be used as a substitute for another material. It means that concrete should look like concrete and not be painted or sculpted to look like bricks.</p>
<p>Material honesty values and celebrates the unique properties and characteristics of each material. An architect who follows material honesty knows when each material should be used and how to use it without tarnishing itself.</p>
<p>Material honesty is not a hard and fast rule though. <a href="https://alistapart.com/article/material-honesty-on-the-web#section5">It lies on a continuum</a>. Like all values, you are allowed to break them when you understand them. As the saying goes, they are “more what you’d call “guidelines” than actual rules.”</p>
<p><a href="https://resilientwebdesign.com/chapter2/#dancingaboutarchitecture">When applied to web design</a>, material honesty means that one element or component shouldn’t look, behave, or function as if it were another element or component. Doing so would cheat the user and could lead to confusion. A common example of this are <a href="https://medium.com/simple-human/but-sometimes-links-look-like-buttons-and-buttons-look-like-links-9b371c57b3d2">buttons that look like links or links that look like buttons</a>.</p>
<p><a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications/">Links and buttons have different behaviors and affordances</a>. A link is activated with the enter key, typically takes you to a different page, and has a special context menu on right click. Buttons are activated with the space key, used primarily to trigger interactions on the current page, and have no such context menu.</p>
<p>When a link is styled to look like a button or vise versa, a user could become confused as it does not behave and function as it looks. If the “button” navigates the user away unexpectedly, they might become frustrated if they lost data in the process.</p>
<blockquote>“At first glance everything looks fine, but it won’t stand up to scrutiny. As soon as such a website is stress‐tested by actual usage across a range of browsers, the façade crumbles.”<br /><br />— <a href="https://resilientwebdesign.com">Resilient Web Design</a></blockquote>
<p>Where this becomes the most problematic is when a link and button are styled the same and are placed next to one another. As there is nothing to differentiate between the two, a user can accidentally navigate when they thought they wouldn’t.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png"
sizes="100vw"
alt="Three links and/or buttons shown inline with text"
/>
</a>
<figcaption class="op-vertical-bottom">
Can you tell which one of these will navigate you away from the page and which won’t? (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/00aa1c84-dfb3-454b-a6a1-12e266299cad/button-or-link.png'>Large preview</a>)
</figcaption>
</figure>
<p>When a component behaves differently than expected, it can easily lead to problems for users using a keyboard or screen reader. <a href="https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#3552">An autocomplete menu that is more than an autocomplete menu</a> is one such example.</p>
<p>Autocomplete is used to suggest or predict the rest of a word a user is typing. An autocomplete menu allows a user to select from a large list of options when not all options can be shown.</p>
<p>An autocomplete menu is typically attached to an input field and <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction">is navigated with the up and down arrow keys</a>, keeping the focus inside the input field. When a user selects an option from the list, that option will override the text in the input field. Autocomplete menus are meant to be lists of just text.</p>
<p>The problem arises when an autocomplete menu starts to gain more behaviors. Not only can you select an option from the list, but you can edit it, delete it, or even expand or collapse sections. The autocomplete menu is no longer just a simple list of selectable text.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png"
sizes="100vw"
alt=""
/>
</a>
<figcaption class="op-vertical-bottom">
With the addition of edit, delete, and profile buttons, this autocomplete menu is materially dishonest. (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3d4fbf38-8aa5-46d0-b3e3-880fae7969c4/not-autocomplete-menu.png'>Large preview</a>)
</figcaption>
</figure>
<p>The added behaviors no longer mean you can just use the up and down arrows to select an option. Each option now has more than one action, so a user needs to be able to traverse two dimensions instead of just one. This means that a user using a keyboard could become confused on how to operate the component.</p>
<p>Screen readers suffer the most from this change of behavior as there is no easy way to help them understand it. A lot of work will be required to ensure the menu is accessible to a screen reader by using non-standard means. As such, it will might result in a sub-par or inaccessible experience for them.</p>
<p>To avoid these issues, it’s best to be honest to the user and the design. Instead of combining two distinct behaviors (an autocomplete menu and edit and delete functionality), leave them as two separate behaviors. Use an autocomplete menu to just autocomplete the name of a user, and have a different component or page to edit and delete users.</p>
<p>To use the <em>Lens of Material Honesty</em>, ask yourself these questions:</p>
<ul>
<li>Is the design being honest to the user?</li>
<li>Are there any elements that behave, look, or function as another element?</li>
<li>Are there any components that combine distinct behaviors into a single component? Does doing so make the component materially dishonest?</li>
</ul>
<h3 id="lens-readability">Lens Of Readability</h3>
<p>Have you ever picked up a book only to get a few paragraphs or pages in and want to give up because the text was too hard to read? Hard to read content is mentally taxing and tiring.</p>
<p>Sentence length, paragraph length, and complexity of language all contribute to how readable the text is. Complex language can pose problems for users, especially those with cognitive disabilities or who aren’t fluent in the language.</p>
<p>Along with using plain and simple language, you should ensure each paragraph focuses on a single idea. A paragraph with a single idea is easier to remember and digest. The same is true of a sentence with fewer words.</p>
<p>Another contributor to the readability of content is the length of a line. The ideal line length is often quoted to be between 45 and 75 characters. A line that is too long causes users to lose focus and makes it harder to move to the next line correctly, while a line that is too short causes users to jump too often, causing fatigue on the eyes.</p>
<blockquote>“The subconscious mind is energized when jumping to the next line. At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line”<br /><br />— Typographie: A Manual of Design</blockquote>
<p>You should also break up the content with headings, lists, or images to give mental breaks to the reader and support different learning styles. Use headings to logically group and summarize the information. Headings, links, controls, and labels should be clear and descriptive to enhance the users ability to comprehend.</p>
<p>To use the <em>Lens of Readability</em>, ask yourself these questions:</p>
<ul>
<li>Is the language plain and simple?</li>
<li>Does each paragraph focus on a single idea?</li>
<li>Are there any long paragraphs or long blocks of unbroken text?</li>
<li>Are all headings, links, controls, and labels clear and descriptive?</li>
</ul>
<h3 id="lens-structure">Lens Of Structure</h3>
<p>As mentioned in the Lens of Layout, the structural layout is what is used by screen readers and users using a keyboard. While the Lens of Layout focused on the visual layout, the Lens of Structure focuses on the structural layout, or the underlying HTML and semantics of the design.</p>
<div id="sponsors-article" data-impression="true" class="c-promo-box c-promo-box--ad sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
<p>As a designer, you may not write the structural layout of your designs. This shouldn’t stop you from thinking about how your design will ultimately be structured though. Otherwise, your design may result in an inaccessible experience for a screen reader.</p>
<p>Take for example a design for a single elimination tournament bracket.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png"
sizes="100vw"
alt="Eight person tournament bracket featuring George, Fred, Linus, Lucy, Jack, Jill, Fred, and Ginger. Ginger ultimately wins against George."
/>
</a>
<figcaption class="op-vertical-bottom">
<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01da319f-6419-4b00-971f-1376f30e3d50/tournament-bracket.png'>Large preview</a>
</figcaption>
</figure>
<p>How would you know if this design was accessible to a user using a screen reader? Without understanding structure and semantics, you may not. As it stands, the design would probably result in an inaccessible experience for a user using a screen reader.</p>
<p>To understand why that is, we first must understand that a screen reader reads a page and its content in sequential order. This means that every name in the first column of the tournament would be read, followed by all the names in the second column, then third, then the last.</p>
<blockquote>“George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”</blockquote>
<p>If all you had was a list of seemingly random names, how would you interpret the results of the tournament? Could you say who won the tournament? Or who won game 6?</p>
<p>With nothing more to work with, a user using a screen reader would probably be a bit confused about the results. To be able to understand the visual design, we must provide the user with more information in the structural design.</p>
<p>This means that as a designer you need to know how a screen reader interacts with the HTML elements on a page so you know how to enhance their experience.</p>
<ul>
<li><strong>Landmark Elements</strong> (header, nav, main, and footer)<br />
Allow a screen reader to jump to important sections in the design.</li>
<li><strong>Headings</strong> (<code>h1</code> → <code>h6</code>)<br />
Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.</li>
<li><strong>Lists</strong> (<code>ul</code> and <code>ol</code>)<br />
Group related items together, and allow a screen reader to easily jump from one item to another.</li>
<li><strong>Buttons</strong><br />
Trigger interactions on the current page.</li>
<li><strong>Links</strong><br />
Navigate or retrieve information.</li>
<li><strong>Form labels</strong><br />
Tell screen readers what each form input is.</li>
</ul>
<p>Knowing this, how might we provide more meaning to a user using a screen reader?</p>
<p>To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.</p>
<p>Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.</p>
<p>By just adding headings, the content would read as follows:</p>
<blockquote>“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”</blockquote>
<p>This is already a lot more understandable than before.</p>
<p>The information still doesn’t answer who won a game though. To know that, you’d have to understand which game a winner plays next to see who won the previous game. For example, you’d have to know that the winner of game four plays in game six to know who advanced from game four.</p>
<p>We can further enhance the experience by informing the user who won each game so they don’t have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.</p>
<p>We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.</p>
<p>If we translate this back into a visual design, the result could look as follows:</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png"
sizes="100vw"
alt="The tournament bracket"
/>
</a>
<figcaption class="op-vertical-bottom">
The tournament with descriptive headings and winner information (shown here with grey background). (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a83b12c-4f43-4570-a978-01833f77cdfc/improved-tournament-bracket.png'>Large preview</a>)
</figcaption>
</figure>
<p>Since the headings and winner text are redundant in the visual design, <a href="https://a11yproject.com/posts/how-to-hide-content/">you could hide them just from visual users</a> so the end visual result looks just like the first design.</p>
<p>“If the end result is visually the same as where we started, why did we go through all this?” You may ask.</p>
<p>The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.</p>
<p>To use the <em>Lens of Structure</em>, ask yourself these questions:</p>
<ul>
<li>Can I outline a rough HTML structure of my design?</li>
<li>How can I structure the design to better help a screen reader understand the content or find the content they want?</li>
<li>How can I help the person who will implement the design understand the intended structure?</li>
</ul>
<h3 id="lens-time">Lens Of Time</h3>
<p>Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.</p>
<p>Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.</p>
<blockquote>“The designer should assume that people will be interrupted during their activities”<br /><br />— The Design of Everyday Things</blockquote>
<p>Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.</p>
<p>To use the <em>Lens of Time</em>, ask yourself this question:</p>
<ul>
<li>Is it possible to provide controls to adjust or remove time limits?</li>
</ul>
<h3 id="bringing-it-all-together">Bringing It All Together</h3>
<p>So now that you’ve learned about the different lenses of accessibility through which you can view your design, what do you do with them?</p>
<p>The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.</p>
<p>Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.</p>
<p>By looking through your design one lens at a time, you’ll be able to refine the experience to better meet users’ needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.</p>
<p><em>Using lenses and insightful questions to examine principles of accessibility was heavily influenced by <a href="https://www.jesseschell.com/">Jesse Schell</a> and his book “The Art of Game Design: A Book of Lenses.”</em></p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(il, ra, yk)</span>
</div>
<div id="sponsors-article-end" data-impression="true" class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors hidden" data-audience="non-subscriber" data-remove="true"></div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Andrew Clarke</author>
<title>Art Directing For The Web With CSS Grid Template Areas</title>
<link>https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/</link>
<pubDate>Mon, 09 Apr 2018 11:00:23 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/</guid>
<description>(This article is kindly sponsored by CoffeeCup Software.) Alright, I’m going to get straight to the point. CSS Grid is important, really important, too important to be one of those "I’ll use it when all browsers support it" properties. That’s because, with CSS Grid, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability.
If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid too.</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/" />
<title>Art Directing For The Web With CSS Grid Template Areas</title>
</head>
<body>
<article>
<header>
<h1>Art Directing For The Web With CSS Grid Template Areas</h1>
<address>Andrew Clarke</address>
<time datetime="2018-04-09T11:00:23+02:00" class="op-published">2018-04-09T11:00:23+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>(<em>This article is kindly sponsored by CoffeeCup Software</em>.) Alright, I’m going to get straight to the point. CSS Grid is important, really important, too important to be one of those "I’ll use it when all browsers support it" properties. That’s because, with CSS Grid, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability.</p>
<p>If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid too. In this article I’m going to explain how to use one aspect, <strong>grid-template areas</strong>, a way of arranging elements that even a big, dumb mug like me can understand, and one that doesn’t get enough attention.</p>
<p>Now, you want to see some action and some code, I know that, but hold on one Goddam minute. Before you learn "how," I want to teach you "why" it’s important to make the kind of layouts we’ve seen in other media for decades, but have mostly been absent from the web.</p>
<h3>Feeling Frustrated</h3>
<p>I guess you’ve seen those "which one of these two layouts are you designing today?" tweets, lamenting the current state of design on the web. Even I’ve spoken about how web design’s lost its "soul." I bet you’ve also seen people use CSS Grid to recreate posters or pages from magazines. These technical demonstrations are cool, and they show how easy implementing complex layouts with CSS Grid can be when compared to other methods, but they don’t get to the bottom of why doing this stuff matters.</p>
<p>So what’s the reason? Why’s layout such an important part of design? Well, it all boils down to one thing, and that’s communication.</p>
<div class="c-garfield-the-cat">
<p>For what seems like forever, web designers have created templates, then filled them, with little consideration of the relationship between content and layout. I suppose that’s inevitable, given considerations for content management systems, our need to make designs responsive, and the limitations of the CSS properties we’ve used until now. Sure, we’ve made designs that are flexible, usable, but we’ve been missing a key piece of the puzzle, the role that layout plays in delivering a message.</p>
<p>If you’ve been around the block a few times, you’ll know the role color plays in setting the right tone for a design. I don’t need to tell you that type plays its part too. Pick the wrong typeface, and you run the risk of communicating ineffectively and leaving people feeling differently to how you intended.</p>
<p>Layout — closely linked to aspects of typography like the ’measure’ — plays an equally important role. Symmetry and asymmetry, harmony and tension. These principles draw people to your content, guide them, and help them understand it more easily. That’s why crafting the right layout is as important as choosing the most appropriate typeface. Print designers have known this for years.</p>
<h3>Telling Stories Through Art Direction</h3>
<p>Art direction matters as much on the web as it does in other media, including print, and what I’m going to cover applies as much to promoting digital products as it does to telling stories.</p>
<p>What do you think of when you hear the term ’art direction?’ Do you think about responsive images, presenting alternative crops, sizes or orientations to several screen sizes using the <picture> element or ’sizes’ in HTML? They’ve become useful responsive design and art direction tools, but there’s more to web design than tools.</p>
<p>Do you think of those designers like <a href="http://jasonsantamaria.com">Jason Santa Maria</a> and <a href="http://trentwalton.com">Trent Walton</a> who sometimes art direct their writing by giving an entry its own, distinctive image, layout and typography. This gets us closer to understanding art direction, but images, layout, and typography are only the result of art direction, not the meaning of it.</p>
<p>So if art direction isn’t exactly those things, what exactly is it? In a sentence, it’s the art of distilling an essential, precise meaning or purpose from a piece of content — be that magazine article or a list of reasons why to use the coolest app from the hottest start-up — and conveying that meaning or purpose better by using design. We don’t hear much about art direction on the web, but it’s well established in another medium, perhaps the most memorable being magazines and to some extent newspapers.</p>
<p>I’m not old enough to remember first hand <a href="https://en.wikipedia.org/wiki/Alexey_Brodovitch">Alexey Brodovitch</a>’s work on Harpers Bazaar magazine from 1934 to 1958.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c8901b11-6643-44a2-a24c-e18f20f34e37/art-direction-fig-1.png"
sizes="100vw"
alt="designs by Brodovitch"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.1. What I love about these designs — particularly his pencil sketches — is how Brodovitch placed his content to perfectly reflect the image that accompanies it.
</figcaption>
</figure>
<p>I do remember <a href="https://en.wikipedia.org/wiki/Neville_Brody">Neville Brody</a>’s artistic art direction for the Face magazine and I’m still inspired by it every day.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/99326d46-6f78-4851-8d4b-03b8213e31a8/art-direction-fig-2.png"
sizes="100vw"
alt="Brody’s pages from The Face magazine"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.2. Even twenty five years after he created them, Brody’s pages from The Face magazine are still remarkable designs.
</figcaption>
</figure>
<p>Art direction is so rarely discussed in relation to the web that you could be forgiven for thinking that it’s not relevant. Perhaps you see art direction as an activity that’s more suited to the print world than it is to the web? Some people might think of art direction as elitist in some way.</p>
<p>I don’t think that any of that’s true. Stories are stories, no matter where they’re told or through what medium. They may be thought-provoking like the ones published on <a href="https://www.propublica.org/article/devils-deals-and-the-dea">ProPublica</a>, or they might be the story of your company and why people should do business with you. There’s the story of how your charity supports a good cause and why people should donate to it. Then there’s the story of your start-up’s new app and why someone should download it. With all of these stories, there’s a deeper message beyond just telling the facts about what you do or sell.</p>
<p>Art direction is about understanding those messages and deciding how best to communicate them through the organization and presentation of words and visuals. Is art direction relevant for the web? Of course. Art directors use design to help people better understand the significance of a piece of content, and that’s as important on the web as it is in print. In fact, the basic principles of art direction haven’t changed between print and digital.</p>
<p>I’d go further, by saying that art direction is essential to creating cohesive experiences across multiple channels, so that the meaning of a story isn’t lost in the gaps between devices and screen sizes.</p>
<p>David Hillman, formerly of The Guardian and New Statesman and designer of many other publications said:</p>
<blockquote>"In its best form, (art direction) involves the art director having a full and in-depth understanding of what the magazine says, and through design, influencing how it is said."</blockquote>
<p>My friend <a href="http://markporter.com">Mark Porter</a>, coincidentally the former Creative Director at The Guardian also said:</p>
<blockquote>"Design is being in charge of the distribution of elements in space."</blockquote>
<p>CSS Grid makes being in charge of the distribution of elements more possible than ever before.</p>
<h3>Art Directing A Hardboiled Story</h3>
<p>I guess now is the time to get down to it, so I’m going to tell you how to put some of this to work in a series of <em>Hardboiled</em> examples. I’ll shine a flashlight on layout and how it helps storytelling and then give you the low down on how to develop one of these designs using CSS Grid.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0dd5ae4d-0796-4e5e-b6b0-560d11c5f0cf/art-direction-fig-3.png"
sizes="100vw"
alt="several ’shots’ of a story in a Hardboiled book"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.3. When I conceived the covers for my Hardboiled books, I wanted the story to continue across several ’shots.’ (Left: Cover illustrations by <a href='http://bearskinrug.co.uk'>Kevin Cornell</a>. Right: Cover illustrations by <a href='https://nataliesmith.uk/index.html'>Natalie Smith</a>.) (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<p>First, the backstory. On the cover of my 2010 edition of <em>Hardboiled Web Design</em> (1), a mystery woman in a red dress (there’s always a woman in a red dress) is pointing a gun at our private dick. (Sheesh, I know that feeling.) By the <a href="https://stuffandnonsense.co.uk/books#hardboiled-01">Fifth Anniversary Edition</a> in 2015 (2), the story’s moved on and a shadow moves ominously across the door of our detective’s office. The door flies open, two villains burst in (3), and a fist fight ensues (4). Our mystery woman sure knows how to throw a punch and before you can say "kiss me, deadly" one villain’s tied to a chair and ready to spill the beans (5).</p>
<h4>Chapter Three</h4>
<p>I’ll start telling that story at the explosive moment when those two villains bust open the door. Now, if you’ve read Scott McCloud’s book ‘<a href="https://en.wikipedia.org/wiki/Understanding_Comics">Understanding Comics</a>’ you’ll know that panel size affects how long people spend looking at an area, so I want to make the image of our bad guys as large as possible to maximise its impact (1). What the hoods don’t know is that our woman is waiting for them. I use layout to add tension by connecting their eye lines, (2) at the same time drawing a reader’s eyes to where the content starts.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/11126a92-d515-48a6-aed3-e73dc81edd0c/art-direction-fig-4.png"
sizes="100vw"
alt="Adding tension by connecting eye lines and maximise impact through large images."
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.4. Add tension by connecting eye lines and maximise impact through large images. (View <a href='https://codepen.io/malarkey/project/full/ZjPEow/'>project files on CodePen</a>) (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<h4>Chapter Four</h4>
<p>As the first villain bursts onto the scene, I use the left edge of the page, without margins, to represent the open door (1). As most of the action takes place on the right, I create a large spacial zone using the majority of the height and width of the page (2).</p>
<p>Now, when fists fly in all directions, our layout needs to do the same, so my content comes from the top — where whitespace draws the eye down to the bold paragraph (3) — and from the left with the enormous headline (4). You might be wondering why I haven’t mentioned that smaller image in the top-right, but I’ll get to that in a minute.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f281f566-3451-4d9e-a49c-add80d4b750e/art-direction-fig-5.png"
sizes="100vw"
alt="When fists fly, a layout needs to do the same."
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.5. When fists fly, a layout needs to do the same. (View <a href='https://codepen.io/malarkey/project/full/ZjPEow/'>project files on CodePen</a>) (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<h4>Chapter Five</h4>
<p>The fight’s over, and our detective is back in control, so on this final page I use a more structured layout to reflect the order that’s returned. Solid columns of justified text (1) with plenty of whitespace around them add to the feeling of calm. At the same time, the right aligned caption (2) feels edgy and uncomfortable, like the gunpoint interrogation that’s taking place.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c24aecb2-b6d9-4019-a830-12433ab95289/art-direction-fig-6.png"
sizes="100vw"
alt="using layout to create order as well as disorder"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.6. We can use layout to create order as well as disorder. (View <a href='https://codepen.io/malarkey/project/full/ZjPEow/'>project files on CodePen</a>) (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<h3>Getting My Dands Dirty</h3>
<p>It’s time for a confession. I’m not going to teach you everything you need to know about developing layouts using CSS Grid as there are plenty of smarter people who’ve done that before:</p>
<ul>
<li><a href="https://gridbyexample.com">Grid by Example</a> by Rachel Andrew</li>
<li>Learn <a href="http://cssgrid.io">CSS Grid</a> with Wes Bos</li>
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">A Complete Guide to Grid</a> by Chris House on CSS Tricks</li>
</ul>
<p>Instead, I’ll show you the inspiration for one grid, how I translated it into a (large screen) layout using columns and rows in CSS Grid, and then placed elements into the spacial zones created using the <strong>grid-template areas</strong> property. Finally, I’ll deconstruct and alter the design for smaller screen sizes.</p>
<h3>The Perfect Beat</h3>
<p>My inspiration for the layout I use came from this 1983 design by Neville Brody for <em>The Face Magazine</em>. I was drawn to how Brody cleverly created both horizontal and vertical axis and the large space occupied by the main image.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c4084b67-bc11-41c6-9e89-94050534deb0/art-direction-fig-7.png"
sizes="100vw"
alt="layout by Neville Brody for The Face Magazine"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.7. This layout by Neville Brody for The Face Magazine felt like the perfect starting point for my design. Look closely at Brody’s grid, and you should spot that he used five columns of equal width.
</figcaption>
</figure>
<p>I did the same by applying the following CSS Grid properties to the margin-less <body> element of my page, where columns one fraction unit wide repeat five times with a 2vw gap between them:</p>
<pre><code class="language-css">body {
margin: 0;
padding : 0;
display: grid;
grid-column-gap : 2vw;
grid-template-columns: repeat(5, 1fr); }
</code></pre>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/58f08b8f-c447-4ec6-a70d-2bcbc2a083fb/art-direction-fig-8.png"
sizes="100vw"
alt="combining five equal width columns"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.8. I combine five equal width columns in different ways to create spacial zones.
</figcaption>
</figure>
<p>In CSS Grid we define a grid module by giving it a name, then we place an element into either a single module or multiple adjacent modules — known as spacial zones — with the <strong>grid-template-areas</strong> property. Sounds complicated huh? No, not really. It’s one of the easiest and most obvious ways of using CSS Grid, so let’s get to work.</p>
<p>First things, first. I have five elements to position, and they are my "Kiss Me, Deadly" title, the largest ’banner’ image, main content, aside paragraph and two images, fig-1 and fig-2. My HTML looks like this:</p>
<pre><code class="language-html"><body>
<picture role="banner">…</picture>
<h1 class="title">…</h1>
<main>…</main>
<aside>…</aside>
<img class="fig-1">
<img class="fig-2">
</body>
</code></pre>
<p>I wrote that markup in the order that makes most sense, just as I would when constructing a narrative. It reads like a dream on small screens and even without styles. I give each element a <strong>grid-area</strong> value that in a moment I’ll use to place it on my grid:</p>
<pre><code class="language-css">[role="banner"] { grid-area: banner; }
.title { grid-area: title; }
main { grid-area: main; }
aside { grid-area: aside; }
.fig-1 { grid-area: fig-1; }
.fig-2 { grid-area: fig-2; }
</code></pre>
<p>Your grid area values don’t necessarily need to reflect your element types. In fact, you can use any values, even single letters like a, b, c, or d.</p>
<p>Back with the grid, I add three rows to the columns I created earlier. The height of each row is automatically defined by the height of the content inside it:</p>
<pre><code class="language-css">body {
grid-template-rows: repeat(3, auto); }
</code></pre>
<p>Here’s where the magic happens. I literally draw the grid in CSS using the grid-template-areas property, where each period (.) represents one empty module:</p>
<pre><code class="language-css">body {
grid-template-areas:
". . . . ."
". . . . ."
". . . . ."; }
</code></pre>
<p>Now it’s time to position elements on that grid using the grid-area values I created earlier. I place each elements’ value into a module on the grid and if I repeat that value across multiple adjacent modules — either across columns or row, that element will expand across them to create a spacial zone. Leaving a period (.) will create an empty space:</p>
<pre><code class="language-css">body {
grid-template-areas:
". aside . fig-2 fig-2"
"title title banner banner banner"
"fig-2 main banner banner banner"; }
</code></pre>
<p>One more small detail before I finish the layout CSS. I want the content of the aside element to sit at the bottom — close to the title and leaving ample white space above it to draw someone’s eye down — so I use an align-self property that might be familiar from learning Flexbox, but with a new value of ’end.‘</p>
<pre><code class="language-css">aside {
align-self: end; }
</code></pre>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ac03dfad-7847-4f16-b089-23c40aaed6de/art-direction-fig-9.png"
sizes="100vw"
alt="CSS Grid layout for larger screens"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.9. That’s it, my CSS Grid layout for larger screens is done. (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<p>All that remains is to add a few other styles to bring the design to life, including a striking inverse color scheme and a bright, red accent that ties the word "Deadly" in the title to the color of our woman’s dress:</p>
<pre><code class="language-css"><h1 class="title">Kiss Me, <em>Deadly</em></h1>
.title em {
font-style: normal;
color : #fe3d6b; }
</code></pre>
<h3>Going Up In Smoke</h3>
<p>Now, I know you’ve been wondering about that smaller fight image, and I need to admit something. <a href="https://stuffandnonsense.co.uk/blog/introducing-hardboiled-illustrator-natalie-smith">Natalie Smith</a> made only one finished fists flying illustration for my <em>Hardboiled Shot</em> covers, but her sketches were too good to waste. I used CSS Grid to position an inverted version of one pencil sketch above the gun and rotated it with a CSS transform to form a cloud of smoke.</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6aea80d8-3ccb-4a0c-be70-b608e7da9928/art-direction-fig-10.png"
sizes="100vw"
alt="CSS Grid and transforms turn this sketch into a cloud of smoke."
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.10. CSS Grid and transforms turn this sketch into a cloud of smoke. (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<h3>Breaking It Down</h3>
<p>In this article, I’ve shown how to create a layout for large screens, but in reality, I start with a small one and then work up, using breakpoints to add or change styles. With CSS Grid, adapting a layout to various screen sizes is as easy as positioning elements into different grid-template areas. There are two ways that I can do this, first by changing the grid itself:</p>
<pre><code class="language-css">body {
grid-template-columns: 50px repeat(2, 1fr); }
@media screen and (min-width : 48em) {
body {
grid-template-columns: repeat(5, 1fr); }
}
</code></pre>
<p>The second, by positioning elements into different grid-template areas on the same grid:</p>
<pre><code class="language-css">body {
grid-template-areas:
"fig-1 aside aside aside aside"
"fig-1 title title title title"
"banner banner banner banner banner"
".... main main main main"; }
@media screen and (min-width : 64em) {
body {
grid-template-areas:
".... aside .... fig-2 fig-2"
"title title banner banner banner"
"fig-1 main banner banner banner"; }
}
</code></pre>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ded3e5f9-807a-4b76-92d4-a579dde77239/art-direction-fig-11.png"
sizes="100vw"
alt="adapting layout to various screen sizes"
/>
</a>
<figcaption class="op-vertical-bottom">
Fig.11. Adapting my layout to various screen sizes is as easy as positioning elements into different grid-template areas. Small screen (left) Medium screen (right). (Copyright: <a href='https://stuffandnonsense.co.uk/'>Stuff & Nonsense</a>)
</figcaption>
</figure>
<h3>Using CSS Grid Builder</h3>
<p>Grid template areas make developing art directed layouts so easy that even a flat-foot like me can do it, but if you’re the type that likes tools to do the dirty work, <a href="https://www.coffeecup.com/css-grid/">CSS Grid Builder</a> from CoffeeCup Software might be just the thing for you. You may have used WYSIWYG editors before, so you might be remembering how lousy the code they spat out was. Let me stop you there. CSS Grid Builder outputs clean CSS and accessible markup. Maybe not as clean as you write yourself, but pretty damn close, and the small team who developed it plan to make it even better. My handwritten HTML looks like this:</p>
<pre><code class="language-css"><picture role="banner">
<source srcset="banner.png" media="(min-width: 64em)">
<img src="banner-small.png" alt="Kiss Me, Deadly">
</picture>
</code></pre>
<p>The CSS Grid Builder <picture> element comes wrapped in an extra division, with a few other elements thrown in for good measure:</p>
<pre><code class="language-css"><div class="responsive-picture banner" role="banner">
<picture>

<source srcset="banner.png" media="(min-width: 64em)">

<img alt="Kiss Me, Deadly" src="banner-small.png">
</picture>
</div>
</code></pre>
<p>Like I said, close enough, and if you don’t believe me, <a href="http://provide.smashingmagazine.com/css-grid-builder-example.zip">download a set of exported files</a> from my <em>Hardboiled</em> example. Maybe that’ll convince you.</p>
<p>Browsers’ developer tools are getting better at inspecting grids, but CSS Grid Builder helps you build them. Obviously. At its core, CSS Grid Builder is a Chromium-based browser wrapped in a user-interface, and it runs on macOS and Windows. That means that if the browser can render it, the UI tools can write it, with one or two notable exceptions including CSS Shapes.</p>
<p>In fact, CSS Grid Builder builds more than grids, and you can use it to create styles for backgrounds — including <strong>gradients</strong>, which is very handy — borders, and <strong>typography</strong>. It even handles <strong>Flexbox and multi-column layouts</strong>, but you’re here because you want to learn about CSS Grid.</p>
<h3>Looking Around The Interface</h3>
<p>The interface in CSS Grid Builder, is pretty much as you’d expect it, with a wide area for the design you’re making on the left and controls over on the right. Those controls include common elements; text, images, interactive buttons and form controls, and layout containers. If you need one of those elements, drag and drop it into your work area.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ff3712ea-ea77-41e6-9b45-12cee14ad428/art-direction-cssgb-fig-1.png"
sizes="100vw"
alt="Drag and drop common elements including text, images, and layout containers."
/>
</a>
<figcaption class="op-vertical-bottom">
Drag and drop common elements including text, images, and layout containers.
</figcaption>
</figure>
<p>Press to reveal the Styles tab, and you’ll find controls for naming class and ID attributes, applying styles at specific breakpoints and in particular states. All very useful, but it’s the layout section — somewhat inconveniently tucked away at the bottom of the pane — that’s the most interesting.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bfdc16d-0e50-4a5b-9fdc-959772617187/art-direction-cssgb-fig-2.png"
sizes="100vw"
alt="Styles layout section contains grid controls."
/>
</a>
<figcaption class="op-vertical-bottom">
Styles layout section contains grid controls.
</figcaption>
</figure>
<p>In this section you can design a grid. Setting up columns and rows to form a layout without visual representation can be one of the hardest parts of learning how ‘grid’ works. The app’s ability to visually define the grid structure is a handy feature, especially when you’re new to CSS Grid. This is the section I’m going to explain.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4b654b8c-eed0-4b8a-93ba-62188e73c2d4/art-direction-cssgb-fig-3.png"
sizes="100vw"
alt="The Grid Editor contains tools for building a grid visually."
/>
</a>
<figcaption class="op-vertical-bottom">
The Grid Editor contains tools for building a grid visually.
</figcaption>
</figure>
<p>Using CSS Grid Builder I added a container division. When selecting that in the work area, I get access to the Grid Editor. Activate that, and all the tools needed to visually build a grid are there:</p>
<ul>
<li>Add columns and rows</li>
<li>Align and justify content and items within each module</li>
<li>Size columns and rows using every type of unit including fr and minmax</li>
<li>Specify gaps</li>
<li>Name grid-template-areas</li>
<li>Specify breakpoints</li>
</ul>
<p>When I’m happy with those settings, "OK" the changes and they’re applied to the design in the work area. Back there, use sliders to preview the results at various breakpoints, and if you’re one of those people who’s worried about the shrinking percentage of people using incapable browsers, CSS Grid Builder also offers settings where you can figure fallbacks. Then just copy and paste CSS styles to somewhere else in your project or export the whole kit and caboodle.</p>
<figure class="article__image break-out">
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e56d67d-6972-48d6-a695-931e80888b4c/art-direction-cssgb-fig-4.png"
sizes="100vw"
alt="preview results at various breakpoints"
/>
</a>
<figcaption class="op-vertical-bottom">
Preview results at various breakpoints, save the project to edit later or export the files.
</figcaption>
</figure>
<p><a href="https://cssgrid.cc/css-grid-builder.html#get-grid-builder">CSS Grid Builder</a> is currently <strong>free</strong> while CoffeeCup develops it and if you like what they’re doing, you can throw a few dollars their way to help fund its development.</p>
<h3>Cleaning Up</h3>
<p>I’m finding it hard to contain my excitement about CSS Grid. Yes, I know I should get out more, but I really do think that it offers us the best chance yet of learning lessons from other media to make the websites we create better at communicating what we aim to convey to our audiences. Whether we make websites for businesses who want to sell more, charities who need to raise more money through donations to good causes, or news outlets who want to tell stories more effectively, CSS Grid plus thoughtful, art directed content makes that all possible.</p>
<p>Now that’s <em>Hardboiled</em>.</p>
<p><em>I hope you enjoyed this article, now view the <a href="https://codepen.io/malarkey/project/full/ZjPEow/">project files on CodePen</a> or <a href="http://provide.smashingmagazine.com/css-grid-builder-example.zip">download the example files</a>.</em></p>
<p><img style="float: right; padding: 1em;" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af339d7a-a5ce-4f7d-bb46-faa2c0d66192/book-cover-art-directing-for-the-web-100w.png" alt="Art Direction for the Web" /><em>‘Art Direction for the Web’ by Andy Clarke, the first Hardboiled Web Design ‘shot.’ Shots are a series of short books on ‘Art Directing for the web, ’ ‘Designing with a Browser,’ and ‘Selling Creative Ideas’ to be published throughout 2018.</em></p>
<div class="signature">
<img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial">
<span>(ms, ra, il)</span>
</div>
</div>
</article>
</body>
</html>
]]></content:encoded>
</item>
<item>
<author>Lukas van Driel</author>
<title>Hit The Ground Running With Vue.js And Firestore</title>
<link>https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/</link>
<pubDate>Fri, 06 Apr 2018 13:30:33 +0200</pubDate>
<guid>https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/</guid>
<description>Google Firebase has a new data storage possibility called ‘Firestore’ (currently in beta stage) which builds on the success of the Firebase Realtime Database but adds some nifty features. In this article, we’ll set up the basics of a web app using Vue.js and Firestore.
Let&rsquo;s say you have this great idea for a new product (e.g. the next Twitter, Facebook, or Instagram, because we can never have too much social, right?</description>
<content:encoded><![CDATA[
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/" />
<title>Hit The Ground Running With Vue.js And Firestore</title>
</head>
<body>
<article>
<header>
<h1>Hit The Ground Running With Vue.js And Firestore</h1>
<address>Lukas van Driel</address>
<time datetime="2018-04-06T13:30:33+02:00" class="op-published">2018-04-06T13:30:33+02:00</time>
<time datetime="2018-04-20T15:32:23+00:00" class="op-modified">2018-04-20T15:32:23+00:00</time>
</header>
<p>Google Firebase has a new data storage possibility called ‘Firestore’ (currently in beta stage) which builds on the success of the <em>Firebase Realtime Database</em> but adds some nifty features. In this article, we’ll set up the basics of a web app using Vue.js and Firestore.</p>
<p>Let’s say you have this great idea for a new product (e.g. the next Twitter, Facebook, or Instagram, because we can never have too much social, right?). To start off, you want to make a prototype or <strong>M</strong>inimum <strong>V</strong>iable <strong>P</strong>roduct (MVP) of this product. The goal is to build the core of the app as fast as possible so you can show it to users and get feedback and analyze usage. The emphasis is heavily on development speed and quick iterating.</p>
<p>But before we start building, our amazing product needs a name. Let’s call it “Amazeballs.” It’s going to be <em>legen</em> — wait for it — <em>dary</em>!</p>
<p>Here’s a shot of how I envision it:</p>
<figure >
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png">
<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/24ca95ce-f01e-44ad-a95d-556c4377616c/vuejs-and-firebase-image1.png"
sizes="100vw"
alt="Screenshot of Amazeballs app"
/>
</a>
<figcaption class="op-vertical-bottom">
The legendary Amazeballs app
</figcaption>
</figure>
<p>Our Amazeballs app is — of course — all about sharing cheesy tidbits of your personal life with friends, in so-called Balls. At the top is a form for posting Balls, below that are your friends’ Balls.</p>
<p>When building an MVP, you’ll need tooling that gives you the power to quickly implement the key features as well as the flexibility to quickly add and change features later on. My choice falls on Vue.js as it’s a Javascript-rendering framework, backed by the Firebase suite (by Google) and its new real-time database called Firestore.</p>
<aside class="product-panel product-panel__tilted product-panel--book" data-audience="non-subscriber">
<div class="container product-panel--book__container">
<div class="panel__description panel__description--book">
<p><em>“You must unlearn what you have learned!”</em> Meet the <strong>brand new episode</strong> of <a href="https://www.smashingmagazine.com/events/san-francisco-2018/">SmashingConf San Francisco</a> with smart front-end tricks and UX techniques. Featuring Yiying Lu, Aarron Draplin, Smashing Yoda, and many others. Tickets now on sale. April <span class="small-caps">17-18</span>.</p>
<a href="https://www.smashingmagazine.com/events/san-francisco-2018/#speakers" class="btn btn--green btn--large">
Check the speakers →
</a>
</div>
<div class="panel__image panel__image--book">
<a href="https://www.smashingmagazine.com/membership/" class="books__book__image">
<div class="books__book__img">
<img src="https://www.smashingmagazine.com/images/smashing-cat/cat-smashingconf-sf.png" alt="SmashingConf San Francisco, with Yiying Lu, Josh Clark and many others." width="310" height="400">
</div>
</a>
</div>
</div>
</aside>
<div class="c-garfield-the-cat">
<p>Firestore can directly be accessed using normal HTTP methods which makes it a full backend-as-a-service solution in which you don’t have to manage any of your own servers but still store data online.</p>
<p>Sounds powerful and daunting, but no sweat, I’ll guide you through the steps of creating and hosting this new web app. Notice how big the scrollbar is on this page; there’s not