<commit_before>---
title: "I created a website that won a statewide award."
excerpt: "The 2019 version of *The Times-Independent*'s website won best in class among Utah newspapers."
date: 2020-07-19 17:07 -06:00

social_image:
    path: "/assets/images/for-posts/IMG_6686.jpg"
    caption: "An [archived view](https://web.archive.org/web/20191213143945/https://moabtimes.com/) of [moabtimes.com](https://moabtimes.com) from Dec. 13, 2019. *Photo by <NAME>, licensed [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)*{:.credit}"
    alt: "An archived view of moabtimes.com from Dec. 13, 2019."
    title: "An archived view of moabtimes.com from Dec. 13, 2019."
---

Last month, _The Times-Independent_ received from the Utah Press Association the 2019 award for Best Website among the largest weekly newspapers in Utah.

_The Times-Independent_ competed this year among Utah weeklies with circulations of 3,000 or more, including [_Park Record_](https://www.parkrecord.com), [_Salt Lake City Weekly_](https://www.cityweekly.net), and [Emery TV News](https://etvnews.com). College newspapers compete in a separate category of their own, and dailies like [_The Salt Lake Tribune_](https://www.sltrib.com) also have their own group.

For a variety of reasons, including that volunteers from out of state judge Utah's Better Newspaper Contest and that this year's award ceremony was cancelled due to the pandemic, the press association and judges did not provide specific comments about why each of this year's winners were selected.

In lieu of judges' comments, I wanted to give some brief thoughts of my own about the 2019 version of the website and what made it worthy of recognition.

To avoid confusion, I will say at this point that the current version of [`moabtimes.com`](https://moabtimes.com) is not the one that I built. [<NAME>](http://awebstudio.com) built and manages the 2020 version of `moabtimes.com`; he has built websites for a variety of Moab companies including that of *The Times-Independent* Associate Editor <NAME>'s horseback riding business, [Moab Horses](https://moabhorses.com).

The [2019 version of `moabtimes.com`](https://web.archive.org/web/20200215002625/https://moabtimes.com/) is available via Internet Archive's [Wayback Machine](https://web.archive.org).[^Internet-Archive] To get a feel for how the website looked at the time, [click around](https://web.archive.org/web/20200217010322/https://moabtimes.com/2020/02/10/moab-loses-padre-espiritual-in-car-crash-suspect-faces-manslaughter-charge/), but be prepared for many missing pages and photos and much slower page load times. The Wayback Machine is extremely useful but doesn't (and perhaps can't) do everything.

Here is what I think made `moabtimes.com` a winner:

## It stole from others.
{:#stealing}
{:.balance-text}

When building a new website, there is no need to reinvent the wheel. By that, I mean that there is no need to build something from scratch and make novel design choices in the process; many other sites have already made design choices worth learning from.

The websites for [The New York Times](https://www.nytimes.com), [The Washington Post](https://www.washingtonpost.com), [Politico](https://www.politico.com), [Axios](https://www.axios.com), and other digitally-focused news sites have a lot to teach about designing a news site, including the location of the search bar, location and size of the masthead, screen width of articles, number of fonts used, layout of the front page, how much white space to use, how much text to use, how many images to use, …

These are websites with their own professional web designers that have iterated on the design of their sites for years. If there is anyone from whom to steal ideas, it is them.

One of the best examples of clean, ad-free, distraction-free (besides the unfortunate pop-up it has about its newsletter) web design that I have found from a digital news site is from [ProPublica](https://www.propublica.org).

As a nonprofit with a solid base of donations and foundation dollars, the publication doesn't use any advertising from what I have seen, getting at one of the key challenges that faces news publications: The business model.

Solving this business problem has meant that ProPublica is free to do pretty much whatever it wants with its web design — no ads, few distractions: just the good stuff. That really becomes apparent browsing around the site.

## Its pages were small and fast.
{:#fast}
{:.balance-text}

Moab generally has pretty good internet speeds, but if you trek far enough from the valley, those speeds either fall drastically or disappear completely.[^rural-broadband] As of writing, uncapped broadband internet is unavailable in Castle Valley, a town of just under 400 people, and in some places in the southern part of Spanish Valley.

For that reason, and because even some people who live near downtown Moab do not pay for (and maybe cannot pay for) the fastest internet speeds available to them, it is important to make web pages small so that people can actually load them.

It's like trying to download a movie versus loading a small image. Cutting the cruft that can build up on websites — needless scripts, images that are too large, unused typefaces — helps keep page sizes small, making your website accessible to more people.

Maintaining a fast web server can be a relatively low-cost task, but you have to [program it with the right priorities](#software). A [mid-tier Amazon Lightstail server](https://aws.amazon.com/lightsail/pricing/) hosted the 2019 version of `moabtimes.com`, and [Cloudflare](https://www.cloudflare.com)'s content delivery network served the content, combining for one of the most cost-effective and fast back ends currently available to small businesses. More on the [systems](#systems) and [software](#software) later.

Together, these cost-effective web technologies serving a stripped-down WordPress site made for page speeds that consistently rated 90% or better on [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=moabtimes.com) — on par or better than most national news outlets.

For more on the key principals of modern website administration, see Google's [web.dev](https://web.dev/) project.

## It was designed for focus.
{:#focus}
{:.balance-text}

Local news does not need to be the center of attention for people. Gaining attention can help a newspaper's bottom line in the short term, but keeping `moabtimes.com` focused rather than trying to be everything to everyone meant that the newspaper built rapport with readers for giving them exactly what they came for and nothing more: All the news happening in Moab.

For-profit news organizations — desperate for eyes; having seen the success of Facebook, Twitter, YouTube, and other sites in fully consuming content consumers' attention with their platforms; and failing to sustain themselves on the economics of advertising that worked before social media — can find themselves doing whatever they can to yank at and hold readers' attention, which I made sure `moabtimes.com` and the newspaper's social media presence didn't do.

As is my personal website, the 2019 version of `moabtimes.com` was designed to focus readers on what they were reading, watching, or looking at. That meant no ditracting sidebars, no pop-ups, and no elements that move unless the user wants them to move.

The newspaper is and always has been supported by advertising, so there was by necessity a single ad spot at the top of each page — though that is much less than the number of ad spots on [the *Moab Sun News*'s site](https://www.moabsunnews.com). On my last visit, I counted the number of ads on the 12 tops stories on their site and got a range of five to seven ads per story (usually seven), not including the donation solicitations at the top of every page.

Eliminating distractions and designing the page for readability (i.e. choosing readable fonts, picking the optimal width for the text so lines aren't too long or too short, …) gives the reader an opportunity to digest the information at their own pace rather than pushing them to click away to an ad, a donation page, irrelevant information or another story.

However, building a newspaper around advertising will always, necessarily lead to dividing the readers' attention between the news and commercial promotions.

## Everything unnecessary was stripped away.
{:#necessity}
{:.balance-text}

In my experience designing websites, promoting focus means keeping things simple. I aim to give the reader just the words to read and well-placed, relevant images to view; in many cases, nothing more is needed.

I think about this in terms of browsing versus reading. When a reader visits the website's homepage, they're probably in a browsing or discovery mode. They might not know exactly what they're seeking, so I give them the menu of what is available to read and guide them toward the important stories by putting them at the top and using good photos and headlines.

Readers can also come to a website knowing exactly what they're looking for; in that case, I give them a search bar to help them dig for the thing they want. There are also the middle cases where the reader knows what section they want to read from, or what topic interests them. The site can also serve those interets.

Once a reader has selected a story they want to read, I use a page design [stripped of all potential distractions](https://web.archive.org/web/20200213233902/https://moabtimes.com/2020/02/07/county-opposes-sand-flats-oil-gas-lease-sales/). This has two purposes: One is that the content is the very reason the reader is on the site, so I don't distract them from the content, and I support the content with a minimalistic design.

Second is that it is hard to read something on a phone or computer without getting distracted, even before factoring in how jarring a pop-up or notification can be while you are trying to focus on the words. I do whatever I can to ensure the web design does noy contribute to the distracting nature of digital content.

Minimizing distractions also applies when users are in browsing mode. News sites — especially desperate local news sites — will try to turn themselves into the center of their readers' attention, for a variety of reasons and with a variety of methods.
<commit_msg>award story edits<commit_after>---
title: "I created a website that won a statewide award."
excerpt: "The 2019 version of *The Times-Independent*'s website won best in class among Utah newspapers."
date: 2020-07-19 17:07 -06:00

social_image:
    path: "/assets/images/for-posts/IMG_6686.jpg"
    caption: "An [archived view](https://web.archive.org/web/20191213143945/https://moabtimes.com/) of [moabtimes.com](https://moabtimes.com) from Dec. 13, 2019. *Photo by <NAME>, licensed [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)*{:.credit}"
    alt: "An archived view of moabtimes.com from Dec. 13, 2019."
    title: "An archived view of moabtimes.com from Dec. 13, 2019."
---

Last month, _The Times-Independent_ received from the Utah Press Association the 2019 award for Best Website among the largest weekly newspapers in Utah.

_The Times-Independent_ competed this year among Utah weeklies with circulations of 3,000 or more, including [_Park Record_](https://www.parkrecord.com), [_Salt Lake City Weekly_](https://www.cityweekly.net), and [Emery TV News](https://etvnews.com). College newspapers compete in a separate category of their own, and dailies like [_The Salt Lake Tribune_](https://www.sltrib.com) also have their own group.

For a variety of reasons, including that volunteers from out of state judge Utah's Better Newspaper Contest and that this year's award ceremony was cancelled due to the pandemic, the press association and judges did not provide specific comments about why each of this year's winners were selected.

In lieu of judges' comments, I wanted to give some brief thoughts of my own about the 2019 version of the website and what made it worthy of recognition. I built the site over the course of two months essentially from the ground-up and spent a lot of time making sure that it would be something people enjoyed using.

To avoid confusion, I will say at this point that the current version of [`moabtimes.com`](https://moabtimes.com) is not the one that I built. [<NAME>](http://awebstudio.com) built and manages the 2020 version of `moabtimes.com`; he has built websites for a variety of Moab companies including that of *The Times-Independent* Associate Editor Sena <NAME>'s horseback riding business, [Moab Horses](https://moabhorses.com).

The [2019 version of `moabtimes.com`](https://web.archive.org/web/20200215002625/https://moabtimes.com/) is available via Internet Archive's [Wayback Machine](https://web.archive.org).[^Internet-Archive] To get a feel for how the website looked at the time, [click around](https://web.archive.org/web/20200217010322/https://moabtimes.com/2020/02/10/moab-loses-padre-espiritual-in-car-crash-suspect-faces-manslaughter-charge/), but be prepared for many missing pages and photos and much slower page load times. The Wayback Machine is extremely useful but doesn't (and perhaps can't) do everything.

Here is what I think made `moabtimes.com` a winner:

## It stole from others.
{:#stealing}
{:.balance-text}

When building a new website, there is no need to reinvent the wheel. By that, I mean that there is no need to build something from scratch and make novel design choices in the process; many other sites have already made design choices worth learning from.

The websites for [The New York Times](https://www.nytimes.com), [The Washington Post](https://www.washingtonpost.com), [Politico](https://www.politico.com), [Axios](https://www.axios.com), and other digitally-focused news sites have a lot to teach about designing a news site, including the location of the search bar, location and size of the masthead, screen width of articles, number of fonts used, layout of the front page, how much white space to use, how much text to use, how many images to use, …

These are websites with their own professional web designers that have iterated on the design of their sites for years. If there is anyone from whom to steal ideas, it is them.

One of the best examples of clean, ad-free, distraction-free (besides the unfortunate pop-up it has about its newsletter) web design that I have found from a digital news site is from [ProPublica](https://www.propublica.org).

As a nonprofit with a solid base of donations and foundation dollars, the publication doesn't use any advertising from what I have seen, getting at one of the key challenges that faces news publications: the business model.

Solving this revenue problem has meant that ProPublica is free to do pretty much whatever it wants with its web design — no ads, few distractions: just the good stuff. That really becomes apparent browsing around the site (again, with the nagging exception of the newsletter popup).

## Its pages were small and fast.
{:#fast}
{:.balance-text}

Moab generally has pretty good internet speeds, but if you trek far enough from the valley, those speeds either fall drastically or disappear completely.[^rural-broadband] As of writing, uncapped broadband internet is unavailable in Castle Valley, a town of just under 400 people, and in some places in the southern part of Spanish Valley.

For that reason, and because even some people who live near downtown Moab do not pay for (and maybe cannot pay for) the fastest internet speeds available to them, it is important to make web pages small enough that people can actually load them.

It's like trying to download a movie versus loading a small image. Cutting the cruft that can build up on websites — needless scripts, images that are too large, unused typefaces — helps keep page sizes small, making your website accessible to more people.

Maintaining a fast web server can be a relatively low-cost task, but you have to [program it with the right priorities](#software) then keep it that way. A [mid-tier Amazon Lightstail server](https://aws.amazon.com/lightsail/pricing/) hosted the 2019 version of `moabtimes.com`, and [Cloudflare](https://www.cloudflare.com)'s content delivery network served the content, combining for one of the most cost-effective and fast back ends currently available to small businesses. More on the [systems](#systems) and [software](#software) later.

Together, these cost-effective web technologies serving a stripped-down WordPress site made for page speeds that consistently rated 90% or better on [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=moabtimes.com) — on par or better than most national news outlets.

For more on the key principals of modern website administration, see Google's [web.dev](https://web.dev/) project.

## It was designed for focus.
{:#focus}
{:.balance-text}

Local news does not need to be the center of attention for people. Gaining attention can help a newspaper's bottom line in the short term, but keeping `moabtimes.com` focused rather than trying to be everything to everyone meant that the newspaper built rapport with readers for giving them exactly what they came for and not selling them on anything more.

For-profit news organizations — desperate for eyes; having seen the success of Facebook, Twitter, YouTube, and other sites in fully consuming content consumers' attention with their platforms; and failing to sustain themselves on the economics of advertising that worked before social media — can find themselves doing whatever they can to yank at and hold readers' attention, which I made sure `moabtimes.com` and the newspaper's social media presence didn't do.

As is my personal website, the 2019 version of `moabtimes.com` was designed to focus readers on what they were reading, watching, or looking at. That meant no ditracting sidebars, no pop-ups, and no elements that move unless the user wants them to move.

The newspaper is and always has been supported by advertising, so there was by necessity a single ad spot at the top of each page — though that is much less than the number of ad spots on [the *Moab Sun News*'s site](https://www.moabsunnews.com).

On my last visit, I counted the number of ads on the 12 tops stories on their site and got a range of five to seven ads per story (usually seven), not including the donation solicitations at the top of every page. That's not exactly a fair comparison, though, since the *Sun* is free and supported by ads while the *T-I* runs on both ads and subscriptions.

Eliminating distractions and designing pages for readability (i.e. choosing readable fonts, picking the optimal width for the text so lines aren't too long or too short, …) gives the reader an opportunity to digest the information at their own pace rather than pushing them to click away to an ad, a donation page, irrelevant information or another story.

However, building a newspaper around advertising will always, necessarily lead to dividing the readers' attention between the news and commercial promotions — even if advertising is only a part of the organization's revenue. News sites like ProPublica that don't monetize readers' attention are rare.

## Everything unnecessary was stripped away.
{:#necessity}
{:.balance-text}

In my experience designing websites, promoting focus means keeping things simple. I aim to give the reader just the words to read and well-placed, relevant images to view; in many cases, nothing more is needed.

I think about this in terms of browsing versus reading. When a reader visits the website's homepage, they're probably in a browsing or discovery mode. They might not know exactly what they're seeking, so I give them the menu of what is available to read and guide them toward the important stories by putting them at the top and using good photos and headlines.

Readers can also come to a website knowing exactly what they're looking for; in that case, I give them a search bar to help them dig for the thing they want. There are also the middle cases where the reader knows what section they want to read from, or what topic interests them. The site can also serve those interets.

Once a reader has selected a story they want to read, I use a page design [stripped of all potential distractions](https://web.archive.org/web/20200213233902/https://moabtimes.com/2020/02/07/county-opposes-sand-flats-oil-gas-lease-sales/). This has two purposes: One is that the content is the very reason the reader is on the site, so I don't distract them from the content, and I support the content with a minimalistic design.

Second is that it is hard to read something on a phone or computer without getting distracted, even before factoring in how jarring a pop-up or notification can be while you are trying to focus on the words. I do whatever I can to ensure the web design does noy contribute to the distracting nature of digital content.

Minimizing distractions also applies when users are in browsing mode. News sites — especially desperate local news sites — will try to turn themselves into the center of their readers' attention, for a variety of reasons and with a variety of methods.

{'fraction_non_alphanumeric': 0.06293378353029451, 'fraction_numerical': 0.014350028137310074, 'mean_word_length': 4.586848310191249, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 54, 'lorem ipsum': 0, 'www.': 20, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7656091', 'n_tokens_mistral': 5615, 'n_tokens_neox': 5168, 'n_words': 3144}