A Reasonable Website

Why does this exist?

A Reasonable Website exists to help humans make nice websites. It is designed to be a simple, free, and universal vehicle for pushing hypertext out into the world.

Can I use this?

A Reasonable Website is free software. The full, annotated source code is available, and it is released here under the MIT License.

The current version (0.0.2) is usable, but in steady development and not for the faint of heart or the wary of bugs.

How do I use this?

A Reasonable Website is just an HTML document with a single included stylesheet. If that sounds familiar, then you'll feel at home jumping ahead to the getting started guide.

Getting Started Guide

If you're unsure about HTML or CSS, that's OK! Check out Mozilla's handy introductions to HTML and CSS for some beginner-focused guidance.

OK, but what is reasonable?

That is a fair and reasonable question!

Websites can do so much (so much!), but A Reasonable Website has just three goals: a reasonable website should be accessible, performant, and nice-looking.

All software must make choices and those choices reflect the values of its creators. A Reasonable Website tries its very best to make reasonable choices and explicity state those values.

1. Be Accessible

The Web is for everyone, including people with disabilities. Websites should make themselves accessible to the largest possible audience. Millions of humans² live with some form of physical or cognitive disability. Those disabilities can impair and alter people's ability to use the Web.

Sometimes a small amount of code and a reasonable amount of effort can make a website easier to use for a large number of people. A Reasonable Website tries to find those instances and do that work.

A Reasonable Website works well on all kinds of devices and screens. It makes reasonable decisions about HTML element attributes, color constrast, and font sizes that prioritize accessibility.

2. Be Performant

The Web is for everyone, including people who lack access to fast connections and unmetered data.

Small and fast websites are good websites! They save time, energy, and bandwidth with each page load.

The Base Template is currently 4.6kB of gzipped assets (3.6kB of which can be cached). It loads quickly, can be cached reliably, it scrolls and responds to clicks and key presses as one would expect.

It uses system font stacks, tiny SVGs for graphical elements, and generally prefers the good and fast solutions over the perfect and slower ones.

3. Be Nice-Looking

The Web is for everyone and a well-designed Web benefits everyone. There is no reason that an accessible, performant website shouldn't also work well and be kinda nice to look at.

Getting Started

A Reasonable Website is purposefully simple technology: an HTML document with a single included stylesheet.

To get started fiddling or prototyping, copy and paste the below <link> element into the <head> of an HTML document.

<link rel="stylesheet" href="https://unpkg.com/reasonable-website/dist/css/styles.min.css">

Copy and paste the entire below Minimum Template into a blank HTML document.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <meta name="description" content="">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/reasonable-website/dist/css/styles.min.css">
  <body>
  </body>
</html>

Download a copy of the entire git repository.

The repository will come with documentation, production and development versions of the stylesheets, all of the templates, and even a copy of this website.

Install the npm package by running this npm command in your terminal.

npm install reasonable-website

Clone the git repository, by running this git command in your terminal.

git clone git@github.com:matthewhowell/reasonable-website.git

The repository will come with documentation, production and development versions of the stylesheets, all of the templates, and even a copy of this website. Read more about cloning a git repository.

Acknowledgements, Credits, and Thanks

The A11Y Project

Thanks to The Accessibility Project and their WCAG Compliance Checklist.

Anyone can donate to The A11Y Project.

Accessible Icon Project

Thanks to Triangle and The Accessible Icon Project. This site uses the icon in the Be Accessible heading.

Anyone can donate to Triangle.

A11y.coffee

Thanks to the generous Amberley Romo and the wonderful a11y.coffee for its clear and concise explaination of common accessibility problems, goals, and strategies.

Feather Icons

Thanks to Cole Bemus for his very nice-looking Feather icons. This site uses the clock icon in the Be Performant heading and the eye icon in the Be Nice-Looking.

Laura Kalbag

Thanks to Laura Kalbag for her book Accessibility For Everyone and for all of her work at the Small Technology Foundation.

Anyone can donate to the Small Technology Foundation.

MDN Web Docs

Thanks to Mozilla and the wonderful MDN Web Docs are an absolutely essential resource for anyone doing work on the web.

Anyone can donate to Mozilla.

W3C

Thanks to the W3C and their Web Accessibility Initiative, which provides great accessibility resources to all kinds of folks (like developers and designers).

Anyone can donate to the W3C.

WebAIM

Thanks to WebAIM and their Contrast Checker tool.