Rontacts, the best thing I ever made

The best thing I ever made isn’t my most impressive technical achievement. In fact, it contains under 70 lines of code, only uses HTML and CSS, and went from idea to creation to installation in a single day.

My dad, Ron, was the first person I knew to buy an iPhone. He loved it. By 2018, he still found it essential, but diabetes had saddled him with cognitive, motor, and low-vision issues that made it frustrating for him to navigate his Messages and Phone apps anymore.

He could still text some, and he could definitely still talk—when he got that far in the process. But he rarely did anymore.

Often, he would just give up. And when he didn’t, he would just tap a recent conversation in his Messages/Phone apps and hope it was the person he’d meant to contact. It almost never was. I once got a call from an old coworker of his telling me he had texted to ask if I was on my way over to take him to lunch. (I actually hadn’t planned on it, but I did go take him to lunch!)

He just couldn’t execute the process of starting a text or call successfully, anymore. And it was really depressing him.

With all the information and/or icons we see when opening them, the iPhone’s Messages and Phone apps are more complicated than we think. And they work in reverse order from how we think!

Though we may say to ourselves, “I want to text Greg,” our brain really formulates it in this order:

  1. I want to contact Greg.
  2. I want to do it via text.

We don’t think, “I want to text someone, and I want it to be Greg.” But that’s how those apps work (how they have to work, really). And neither the Contacts app nor Siri clicked with my dad.

What he needed was a Greg app. And a Beth (my sister) app. And a Paul (his best friend) app. And so on, for those of us he wanted to contact most frequently.

So I made them:

The homescreen apps I installed on my dad’s iPhone, and the app interface for a single contact (me).

One afternoon, I produced the above collection of web apps and saved them to his homescreen. He wasn’t using the phone for anything else at this point, so I tucked everything else in a folder.

I created the apps with these goals in mind:

  1. Designed to lower cognitive load (who to contact, and then how to contact).
  2. High font sizes and contrast, for easy reading.
  3. Large, obvious buttons with plenty of space between them, to account for low vision and fine motor issues.

And they worked! I actually was a little surprised that such a simple solution could work.

My dad immediately went back to calling and texting those of us for whom he had apps, and he even requested a couple more, over time.

He died in 2019, but I’m glad I was able to make something to help him better stay in touch with all of us for that last year of his life.

The code

In case you’re interested, I’ve copied the code for one of the apps below (minus my real phone numbers). When making installable web apps, remember that you also may want to provide a 180×180 .png homescreen icon, too.

Make a 180×180 .png for your app’s icon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <title>Greg</title>
  <link rel="apple-touch-icon" href="touch-icon-greg.png" />
  <style type="text/css">
    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background: #fff;
      color: #060606;
      font-family: "system-ui", -apple-system, sans-serif;
      font-size: 100%;
      line-height: 2.9;
      -webkit-text-size-adjust: none;
    }
    main {
      display: flex;
      flex-direction: column;
      height: 100vh;
      justify-content: space-evenly;
      margin: 0 auto;
      padding: 1rem;
      width: 100vw;
    }
    main h1, main a {
      text-align: center;
      width: 100%;
    }
    main h1 {
      font-size: 3.5rem;
    }
    main a {
      background: #fc6;
      border: 3px solid #c60;
      border-radius: 1.5rem;
      color: #060606;
      display: block;
      font-size: 2.25rem;
      font-weight: 700;
      text-decoration: none;
    }
    main a:active {
      background: #fb5;
    }
  </style>
</head>
<body>
  <main>
    <h1>Greg</h1>
    <a ontouchstart="" href="sms://6305551111">Text Greg</a>
    <a ontouchstart="" href="tel://6305552222">Call Greg (Home)</a>
    <a ontouchstart="" href="tel://6305551111">Call Greg (Cell)</a>
  </main>
</body>
</html>