All in

Designing for everyone, everywhere.

My question is a simple one - can html be styled well enough and simply enough so that anyone can write for the web, using just a text editor, and share that work with anyone else, regardless of the platform they are using, the speed of their connection and any disabilities they may have?

And, along with that, I would like to:

  1. Make sure it is available with as few distractions as possible, so it can be read easily with a clear focus.
  2. Make extensive and deep collections of information available to everyone in the smallest possible file size and most common format.

I believe it can be done.

Here is a story presented in that way:
Ernest Hemingway, The Big Two-Hearted River
And a zip file of it to download, if you want to read it off line.

And simple markup anyone can copy, paste and use, which meets those needs:

<!DOCTYPE HTML>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,
user-scalable=yes>
<style type=text/css>
html{margin:0 auto;max-width:33em}
body{font-family:Georgia,serif;font-size:16px;
padding: 0 .5em 1em .5em}
h1{font-size:125%;font-weight:normal;
text-transform:uppercase;
letter-spacing:0.18em;padding:1em 0 0 0}
h2{font-size:115%;font-weight:normal}
h3{font-size:110%;font-weight:normal}
h4{font-size:105%;font-weight:normal}
p{font-size:100%;line-height:1.5em}
a:link{color:#900;text-decoration:none}
a:visited {color:#900;text-decoration:none}
</style>
<title>Model page</title>
</head>
<body>
<header>
<h1>Title</h1>
<h2>Author</h2>
<h3>Date</h3>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exercitation ulliam 
corper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem veleum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel willum 
lunombro dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.</p>
</article>

</body>
</html>

Or open this page, save the source and open it in a text editor to enter your content.

If you want to use images, add this in the style sheet: 

img{width:100%;height:auto}
And this in the body: 
<img src="foo.jpg"alt="foo">

An example of a file with an image, which also uses an embedded font.

And here is one using the same text with a SVG background.

If you are interested in working on content that is made to be available to everyone, quickly and transparently, send me a note.

Jerrold Maddox