Ideas on Page Design

▼

Your Content.

Since you're here, you're probably building a page for Writng.Com. That means you already know what the content is going to be. The content is the whole point, right? The content is the soul of your page. The rest is just fluff.

Well, not exactly. I'm sure you've got awesome content. I've been lurking on WDC long enough to know how talented folks here are. The trick is to make the visual presentation of the content match your brilliant ideas.

You've got the content. That's the hard part. The rest is just some simple techniques. Actually, "technique" is a fancy word for a "trick" that you can use more than once. So you just need to apply a few tricks to make pages shine.

Organize Your Content Using Headlines. ▼

I know. Your content is already organized. It's not random word salad jumbled together. You thought it through, and put things in order. This step involves finding places to insert visual cues for your readers. Places where you start a new topic, for example, or where you introduce a new idea.

So, the first thing to do with your content is look for these natural breaks in the text--places where you could insert a headline. Headlines will break up your text and make it easier to read. In fact, it's a good idea to strive for headline breaks at least every screenful of text--about every 300 words or so. Of course, the size of a single screen depends on things you can't control, things like the user's screen size or typeface choices, but 300 words is a pretty good estimate.

I've called them headlines, but they could also be bullet points. Sometimes in visual media bullet points are better than text, just because they are more visual. Whatever you call them, they are natural breaks in the text.

You'll noticed that we've used the dropnote links as our headlines, and that clicking on them reveals about a page of text. They're kind of like turning a page in a book. We'll talk about the WritingML for doing that in the layout section.

That's a LOT more breaks than you'd expect to see in printed media. That's because, for a variety of reasons, screens filled with text are more fatiguing to read than printed media. We'll discuss this more in a bit. For now, it's important to identify and mark these breaks.

Organize Your Headlines. ▼

Headlines are visual cue for the reader, but they work that way for the author, too.

Once you've got the headlines, a different organizational structure might occur to you. The headlines give an overview of the content--like the struts in a wall or the piers holding up a bridge.

Also, as the author, you'll know that some of the headlines are more important than others. The most important headlines are like chapters in a textbook or novel--they are natural breaking points in the stream of ideas, and point to larger divisions in the content.

Organizing your headlines means finding the major and minor break points. You might have a major break point with three sub-headlines.

An Example. ▼

Suppose your content is inviting people to enter an online writing contest. There are lots of these on WDC. Perusing them shows typical headlines are:

What to enter.
Prompts
How to enter
Rules
Prizes
Judging

There are likely subheadings under each heading. For example, is this for prose, poetry, or both? Suppose you have a particular interest in poems using anapestic tentrameter. Some people--like me!--might not know that is, so a definition would be a subheading under the "what to enter" heading. Is there a minimum or maximum length? Does it have to be new for this contest?

The Rules could have many headings or bullets. These involve contest deadlines, whether or not adult content is permitted, lenght of entries, whether items or book entries are acceptable, and so on.

You get the idea.

The SIngle Screen Rule. ▼

What's that? And why break everything up, anyway?

Those are good questions. Hemingway didn't stop every hundred words or so with a bullet point in The Sun Also Rises. Even textbooks have long stretches of unbroken prose. So what gives? Why this emphasis on breaks?

At first glance, it looks like there's not much difference between a page on Writing.Com--or anywhere on the web--and a page in a book. There are words in a row that make up sentences. The sentences make up paragraphs, which make up pages, and so on.

It turns out, there is a difference. In the first place, those words in a row are in longer rows on screens than in books. Longer rows are more fatiguing to read. For one thing, it's easier to lose your place. That's why newspapers use narrow columns. Years of practical experience--now verified by research--has led to the standard page sizes for books. Those standards have shorter line lengths than the typical web page. This is true even on Writing.Com, where the content for member pages is restricted to the middle of the screen. On my desktop, that gives a line-length over twice as a long as a hard cover book and three times as along as a paperback.

Scrolling a screen is also different than turning a page. Turning a page is tactile. You don't have to peer at the page to be sure that you don't turn too many or too few. Scrolling keeps your eyes nailed to the screen, watching to get it just right. That's why readers for e-books have page-turning buttons instead of scroll bars. As we said above, clicking on the headlines on this page is like turning the page in a book.

This gives rise to an important conclusion

The Single Screen Rule: Try to keep the text between headlines limited to a single screen.

The first step in implementing this rule is identifying headlines that are spaced no more than one screenful of text apart. In practice, this means there should be no more than 300-400 words between headlines.

The emphasis on breaks is to give the readers a break and to make your pages both more visually appealing and less tiring to read. The headlines help the reader identify the important concepts, and let them know something new is coming. Web pages are mixed media in the sense that they are both visual and textual. Different content will have a different mix of visual and textual elements, but the web provides both a challenge and an opportunity for authors.

Now What? ▼

The organization of your content lets you decide what the layout should be. That's the next topic!

▼

The Problem.

You're reading this document on a well-designed website: Writing.Com. The owners have followed good principles of web design.

Take a look at it for a moment. For example, it's organized in segments.There is the left column, headed by the company logo and followed by a list of navigational links to the the site. There's the top row, with links to things like Writing.Com 101 and the newsfeet. Finally, the right-hand column includes links to your favorites and to sponsored items--a place where members can advertise their work through the bid-click system. Then there's the big block in the middle which changes as you click through the site. That's where the main content of any page goes, surrounded by those other segments which don't change.

With few exceptions, everywhere you go on Writing.Com has the same familiar navigational tools. The part of the site where we users put our content is that big block in the middle. For a site dedicated to authors, that's perfect. We can post poems, short stories, even novels, in readable form in that middle section.

Yet, over the years users have used the area to create contests, social activities, reviewing boards, blogs, and many other things. There are even online courses. The people who come to this site are creative, and want to share that creativity. That often means creating pages with lots of content: colorful text, graphics, and more. The richer the content of a page, the more it can benefit from good web design.

The problem is how to incorporate web design principles into an area meant for poems and fiction.


Layout is the Answer. ▼

Creating a user page on Writing.Com isn't the same as creating a web page. Our user pages certainly reside on web pages, since they (almost) always have the same navigational blocks on the left, right, and top as every other page on Writing.Com. The single exception is user web pages hosted by Writing.Com, but that's a separate topic. What we're interested in here that big middle segment and helping your readers navigate that part of the content--the part we create.

It's one thing if we are publishing fiction or a poem--after all, that's what this space is designed for, and the Writing.Com editor gives tools for formatting text. It's relatively straightforward to insert italics or to center a title, for example. Fiction doesn't usually need much more than this. Indeed, unusual formatting or layout can distract from fictional world of the story. We do NOT recommend using headlines or other formatting that pulls the reader out of the here-and-now of the fictional world.

Still, some elements of layout are common in fiction. Layout means formatting your text to facilitate reading, understanding, and navigating the content. For fiction, you probably don't need much more than the occassional bit of italics, or perhaps an extra line feed to mark a jump in time. Articles, though, are different.

Articles engage the reader in ways unlike fiction. Our goal in fiction is to induce the fictional dream in the readers, in which they become the author's collaborator in imagining the fictional world. In an article, though, we are engaging the reader on an intellectual level, to persuade, or inform, or teach. Articles are where headlines are helpful.

Writing.Com newsletters are an example of where headlines appear. For example, see "For Authors Newsletter (July 26, 2023)" . You'll also notice that example also uses color and boldface to emphasize important ideas in addition to headlines.

When you write an article, blog, or newsletter, you can use layout to facilitate the readers' interactions with your content.

Again, there's nothing fancy here. We're just using the standard layout tools provided by the Writing.Com editor, along with the Single Screen Rule from the first section. That's enough for almost all pages on Writing.Com.

However, a few pages on Writing.Com are more complex than simple newsletters or blogs. This one, for example, has multiple sub-pages, kind of like the chapters in a book. These longer, more complex pages, are the main subject of the remainder of our discussion.

Beyond Headlines ▼

We've been using headlines, too, as you've doubtless noticed. The way we've been using them employs one of the layout tools that the owners of Writing.Com have provided. Layout includes things like inserting italics or boldface in your copy. Layout means formatting your copy so that it's more readable. When you're writing a longer article for a screen, that means implementing the Single Screen Rule.

We've already mentioned formatting italics by typing {i} formatting italics{/i} in the editor to get italicized type. The layout tool we've been using is like that. It employs something called a dropnote. Here's the syntax

{dropnote:"YOUR HEADLINE GOES HERE"}
Your content goes here. Anything you can put in a regular page works. Images, paragraphs, and so on. Anything except another dropnote. However, there's a way around that. We'll tell you that secret later in the Navigation section. Just like with italics, you have to end the dropnote like so:
{/dropnote}

The result is YOUR HEADLINE in blue, underlined text--a link. When the reader clicks on the link, it expands to show the material in green, your content, i.e., the material between the end of the initial {dropnote:"HEADLINE"} tag and the start of final {/dropnote} closing tag . The code we used for the dropnote that you clicked above was

{dropnote:"Beyond Headlines."}

We ended the entire section with {/dropnote}-see below.

Back toi the syntax: the text hiighlighted in green is the content you want to fit on one screen. Two important notes:

You cannot format the headline, i.e., the material between the double quotes--no italics, no colors, no font changes between the two " marks, just plain text.
The one thing you can insert in the headline is an image tag.

Now you know almost all the secrets that make this page--or set of pages--work.

We're done with this section, so this is where we close by typing {/dropnote}

Tables ▼

Have you ever wanted to put a table on a Writing.Com page? You can! See!

Chapter	Item	Words	Total so far
1	2192539	2216	2216
2	2192789	2255	4471
3	2192901	2769	7240
4	2192975	2295	9535
5	2193046	2511	12046

This one keeps track of chapters in one of our in-progress books. It gives the chapter number, the item number that contains the chapter, the word count for that chapter, and the words so far. We're kind of obessive about these kinds of details. Anyway, this is an example of a table in a Writing.Com page. The good news it's not hard to do!

It's kind of convoluted, since it involves working through Excel and Word, but it's not hard.

First, create and format your table in Excel. Highlight your table and copy it to your paste buffer with <CONTROL> C.

Next, open a new Word document. In the document, click on the PASTE options in the upper left hand corner of the home screen. Choose PASTE and select option that lets you keep source programming and link the contents. Presto! Your formatted spreadsheet is in your document. Save it to your hard disk with a name you can remember. (On most Windows systems, you can't do the next step from a virtual drive, so you have to save it to a physical disk.) Also, CLOSE the document in Word, since otherwise Windows will lock it and the next step won't work.

Now, on Writing.Com, click the option in the left-column to create a new item. There's a big blank spot at the top that says "Drag and drop your Word document here." So, with file explorer, find the document you just saved. Drag it with your mouse to the area on the Writing.Com screen. It takes a few moments for the system to process your file, then you get another choice: simple or complex HTML. Our goal here is to get a formatted table, so choose "Complex." Fill out the rest of the required elements when creating a new item (title, ratings, etc.), then save and view the document. You'll see your Excel spreadsheet displayed as a Writing.Com item. You can see the one we made this way by clicking here: "Import Excel Table Example" .

It's not perfect, but it produces a reasonable approximation. In our original table, the first row was two lines high, while all the subsequent rows were one line. The process produced a table with what appear to be rows of equal height with lots of extra white space. Not a big deal.

The downside is that you can't edit the resulting Writing.Com item directly. You have to edit your original Excel file, save it, OPEN and then CLOSE the Word document that contains the link to the spreadheet (to update the link). Finally, back at your Writing.Com version of the table, select Edit. This will give you an opportunity to drag and drop the new version in the window that opens, just like you did when you created your document.

Of course, this works for regular Word documents that just have ordinary Word formatting. In this case, though, you can choose to create a SIMPLE HTML document, rather than a complex one. This will give you a document with ordinary WritingML in it, and you can edit that.

How did I get the spreadsheet item, {item:2301751}, to display in this document? Well, that's a trick we'll talk more about in the next section: the insert tag. The document that contains the spreadsheet is "Import Excel Table Example" . In order to display it within another Wrighting.Com document--like this one--use the insert tag like so:

{insert:2301751}

It turns out the insert tag is critical to the next section on navigation.

This isnt exactly layout, but it's useful to know. On the rare occassions when we want to include a table in a Writing.Com document, we have to re-learn how to do this, so it was a good investment of our time to memorialize this here.

Best Practices ▼

The more you insert layout in your copy, the more likely you are to make a mistake. In fact, it's inevitable. Few things are more frustrating than tracking down exactly where you failed to close a {b} tag. It's even worse with dropnote tags, since it's inevitable that the close dropnote tag--the {/dropnote}--is a long ways from where you started it with the original {dropnote:"HEADLINE"} tag.

Best practices are things that people have discovered that help you recover from mistakes. In fact, a definition of a working program is one in which the mistake hasn't been found. Yet. The best praciice that's relevant here is commenting your copy.

But you're copy isn't like a Javascript program that no one except another geek will read. You copy is your content! You need to find an invisible way to insert your camments, a way that people who read your content will never see. Lucky for us, there is another helpful formatting tool that Writing.Com gives us: the {hide} and {/hide} commands. Everything between the start {hide} and stop {/hide} is invisible when the page is displayed.

For longer pages with multiple headlines--and hence multiple {dropnote} tags--it's helpful to have searchable markers for the headlines. That's where the {hide} command comes in.

For example, the layout we used for the above headline was:

dropnote:"Best Practices"} {hide}### Best Practices ###{/hide}

The ### symbols we used aren't required; they just give something to search for that will probably only appear where we've used it to mark {dropnotes}. We've similarly marked the other {dropnote} tags in this document.

Everyone who writes code, whether its Javascript or WritingML, hates writing comments, usually with a white hot passion. That is, until they've made a mistake and can't find where it's at. That's still probably going to happen, but you'll be glad you put comments like this next to your {dropnote} tags.

Turst us.

Accessible Design ▼

This means designing for those who are differently abled. In particular, for those who use screen readers, graphical elements need to include meaningful text that these readers can access.

For dropnotes, screen readers will identify these as a link that can be clicked to reveal more content, and will read the headline you've typed into the dropnote.

You've probably already guessed that the major divisions of this site use dropnotes with an image providing the headline. Screen readers can't read the image, but they can read the title and short description you provided when you loaded the image to your Writing.com portfolio. Therefore, if you use images as navigational tools, you need to be sure that these fields are informative.

In fact, anyone can access these. Hover your cursor over an image on this page. After a moment, a little window will pop up that displays the title, the short description, and item number of the graphic. This is another way Writing.Com evidences good web design.

It's also the case that some users will find the default typeface on your page too small to read. As we've aged, we've discovered that the default typeface for pages is often too small for our weary eyes. We've even enlarged the type on one of our contest pages in response to a request from a user, usinsg the {size:4} and {/size} tags. However, this is generally not necessary. All browsers have the capacity to enlarge (or shrink) the contents (try <control>+). When using my laptop, I often do this while working on Writing.Com, since the dealut font in the editor is microscopic.

If your page uses music as an element, you should similarly attend to accessibility. It can be handy to use color as an element, for emphasis or to link navigational elements for example, but bear in mind that not all readers will report this.

In all cases, it's good practice to anticipate where possible the different ways users will experience your page.

▼

Navigation

Most pages on Writing.Com don't need anything more than standard links, like {item:2301571}. However, pages with multiple long sections, like this one, can benefit from more a more graphical navigation layout. An informational page, like this one, often discusses several distinct aspects of a topic. Those discussions are like chapters in a small book. It's helpful for readers to be able negotiate the various pages. Navigation provides wayfinding tools for a site of this type. Contest pages, which can have distinct sections on prompts, rules, and prizes, are another kind of page where wayfinding can be important for users.

One feature of navigational tools is that they should persist across the content, so that users can find their way back to where they started. Dropnotes persist because we never really leave the page. We just expand some content. Closing a dropnote takes you back to where you started.

There is one problem with dropnotes. Remember, we said that you couldn't put a dropnote inside another dropnote? Yet it looks like we've done exactly that, and more than once. This page, for example, opens as a dropnote you click on the "navigation button," i.e. on the image {image:2301288} The code, which also reduces the image to half-size, is

{dropnote:"{image:2301288-50%}"} {/hide}

So, what gives? There's a dropnote on this page right below here. How'd we do that?

Well, of course there's a trick.

Here's the trick, ▼

Actually, since we do this trick more than once, it's a technique.

Anyway, there's another WritingML bit that solves the problem. Its the insert tag. The context is

{insert:#######}

where ####### is the number of a static item. This only works with static items and webpages on Writing.Com. It does not work with other item types.

We've repeatedly used the insert tag on this page. We've used it precisely six times, to be exact. Each of the six little articles under the major headings are stored in separate static items. The main page has no content. It just has inserts to the desired static item. For example, this page is "Navigation Content" , inserted right after the {dropnote} tag and right before the corresponding {/dropnote}..

This is a good idea to use whenever you have a collection of articles. For this page, we've created a "design" folder in our portfolio, and put a separate "content" folder inside of it. All of the little articles are stored there as static items. The main page, the one your looking at, has no content. It just has the dropnotes for the images and insert commands. Here's what the main page looks like:
                                                           

{center}{image:2301290} {/center}


{center}
{dropnote:"{image:2301286-50%}"} {hide} ###CONTENT### {/hide}
{left}{insert:2301294}{/left}

{/dropnote}{dropnote:"{image:2301287-50%}"} {hide} ###LAYOUT### {/hide}
{left}{insert:2301393}{/left}

{/dropnote}{dropnote:"{image:2301288-50%}"} {hide} ###NAVIGATION### {/hide}
{left}{insert:2301571}{/left}

{/dropnote}

{dropnote:"{image:2301285-50%}"} {hide} ###PALETTE### {/hide}

{left}{insert:2301496}{/left}

{/dropnote}{dropnote:"{image:2301289-50%}"} {hide} ###Simplicity### {/hide}
{left}{insert:2301578}{/left}

{/dropnote}{dropnote:"{image:2301292-50%}"} {hide} ###EXAMPLES### {/hide}
{left}{insert:2301313}{/left}
{/dropnote}
{/center}

                                                           

There are no nested dropnotes because the system processes the insert file, including the dropnotes, before it places the content. The main page doesn't "know" about the dropnotes in the content pages. Magic, no?

Note that we have centered the menu items by surrounding them all with a {center} and {/center} tag. This means that all of the intervening text will be centered, even the text in the inserted files. To avoid this, we have surrounded each {insert:########} tag with {left} and {/left} tags. This aligns the inserted content for each menu item on the left.

It's also good practice any time a site contains several long articles to split things up like this, using insert tags to place your static items inside the main container page.

How is this different from navigation on websites? ▼

That's a good question. After all, the resulting page is on a website, Writing.Com, which already has a full set of navigational tools. The problem is that theese don't point to your pages.

You have at least two ways to point people to your items. One is a text link, like {item:2301281}, which gives the link: "Ideas on Page Design" .

Another way is that you can set up your an image so that when someone clicks on it, it opens a new page on the iitem you name. For example, this image takes you to our contest when you click on it (but don't click on it here):

Okay, you clicked on it, didn't you? At least you found your way back. Clicking on it opened a new page and left this one open. That's not a good thing for a navigation tool. If we'd used this linking feature of images for menus, users would quickly wind up with dozens of pages open, one for each time they clicked on a menu item. That would be so annoying no one would likely ever come back.

Another way would be to surround images with {x-link} and {/x-link} code like so:

{x-link:https://www.writing.com/main/view_item/item_id/2301281}{image:2301536}{/xlink},

Which gives (don't click on this one etiher):

 

You clicked again, didn't you? At least this time it opened this page, but, this time it replaced the window we were in. We'd lose our place if we used this technique. (There's a way around this, but it involves doubling the number of buttons *and* doubling the number container files--a real mess to maintain.)

Having menus that look like a "normal" webpage might be nice, but it's not obvious how you would efficiently do it without creating an actual web page hosted by Writing.Com. But if you want to put navigational tools on a normal item on Writing.Com, using dropnotes are the way to go.

▼

Color Selections

You can find entire books on the psychology and science of colors and the implications for desining online presentations. We're not going to be that deep here--just some general guidelines.

Also, as with our remarks in the section on navigation, our ideas here aren't applicable to most pages on Writing.Com. Our focus is on launch pages for more complex content. By a launch page, we mean that users access the content by clicking on buttons that either launch new pages or use dropnotes to reveal the content without leaving the main page. The actual content is most often best formatted with convential text formatting tools.

With that out of the way, let's talk a little bit about things you can and can't control.

First, every page will have a primary color.That's not true for every web page, but it's true for the pages we can create as users on Writing.Com. It's a good news/bad news situation, though. The good news is that we don't have to choose a primary color--it's something the user sets in their account practices. The bad news is that this color could be white, light yellow, or varying shades of gray. Whatever the user has selected is automatically the background for the page and hence the dominate color. That pretty much makes it the primary color.

However, the default background color is white, so it's a good bet that most users will have that as their background. Moreover, all of these colors are neutral, so they won't clash with almost other color choices. However, the darkest background can have implications for contrast--more on that later.

Given that any page has a default primary color, you still need to choose a color palette. For launch pages, which is what we are writing about, these will primarily be for things like the graphical elements used as navigational links and maybe the text colors used in those elements.

How many colors? ▼

The keep it simple rule is usually good here. Using too many colors runs the risk of making your page look noisy.

Web pages often follow the three color rule: 60% primary color, 30% secondary color, and 10% accent color.

However, the background color is going to be your primary color, so if you apply this rule on your Writing.Com pages, you'll only have two colors. That can work, since you can use different tints shades , and tones of these colors for variety, but it's not a bad thing to add a fourth color.

For graphical elements, you might consider a modified three color rule: 60% main color, 30% secondary color, and 10% accent color., where the color choices apply to your graphical elements.

Color Palette. ▼

Your color palette is your choice of which basic colors you will use for the main, secondary, and accent colors. The color wheel is a useful tool in making these selections.

Most color wheels show twelve basic colors. This one shows various tints of these colors--the basic color is in the outer ring, and the inner rings mix that color progressively with shades of white, to get different tints. The second graphic shows the names of the twelve basic colors, starting with blue-green in the nine-o'clock position and proceeding counter-clockwise around the wheel. Shades mix the basic colors with black to obtain darker versions. Tones mix both white and black.

The palette for this set of pages is basically monocrhomatic: it uses different shades and tints of blue for the navigational elements. The artbrush background for the buttons is basic blue, the text is a darker shade of the same color, and the glow around the text is a lighter tint.

The text in the header graphic is similar, with the text itself the basic blue color, outlined in the darker shade of blue, and with a slightly darker tint for for the glow. The "brand" for this site is more colorful and not constrained by the palette, for variety.

Choosing your Palette ▼

When choosing your palette, it's important to consider contrast. In the case our choices for this site, we used a glow around the text to help set it off from the background, increasing the contrast. We might have made other choices for the secondary color though, that didn't require a glow. For example, if instead of blue we had chosen red. Then the "Palette" button would have looked like this, and no glow would have been needed:

We even thought about a rainbow text for this button, but decided to stick with the basic monotone scheme.


While we used a monochrome strategy for our palette, there are other possiblities.

Complementary palettes choose two colors from the opposite sides of the color wheel. These can be effective because they create both visual balance and tension, To avoid too much tension, it's best if one is the basic color and the other is one of the accent colors.

Analogous palettes choose colors from adjacent spokes on the color wheel. This makes the colors fit together in appealing ways and can result in beautiful designs. Attention to contrast via shade, tint, and tone can be important with these.

A triad palette choses three equally-spaced colors from the wheel. This should be used with caution, though, as it runs the risk of making your page look noisy.

The Psychology of Color. ▼

This is where you can find graduate-level textbooks and is beyond the scope of this little set of ideas. Instead, we're going to list some common cultural associations with color from Stephaie Corrigan.  

Red: passion, power, love, danger, excitement
Blue: calm, trust, competence, peace, logic, reliability
Green: health, nature, abundance, prosperity
Yellow: happiness, optimism, creativity, friendliness
Orange: fun, freedom, warmth, comfort, playfulness
Purple: luxury, mystery, sophistication, loyalty, creativity
Pink: nurturing, gentleness, sincerity, warmth
Brown: nature, security, protection, support

▼

Simplicity.

Of all the simple ideas on this page, this is the simplest. K.I.S.S. Keep it simple, uh, and smart. That's it, right?

Our initial motivation for this page was thinking through how to organize the pages that we run jointly with Carol Saint Ann , "Crosstimbers Review Forum"  and "Tales Shown, Not Told Discussion Forum" . The original versions of these pages were cluttered. They had the necessary information, and the organization was okay, but the pages weren't pleasant to look at. That led to using dropnotes with headlines as links, and "Crosstimbers Review Forum"  stayed that way for quite a while.

Meantime, my author website has undergone several incarnations. Wordpress has a large library of professionally designed themes, and I found one specifically designed for authors that I liked. It had lots of the features that I'd been trying for on my own. Best of all, Wordpress gives you an intuitve interface that requires no programming--it's all point and click. My author website isn't perfect, but I think it looks professional. Check it out if like: https://maxgriffin.net

The problem is that my webpage, like most free-standing webpages, uses HTML and related tools for formatting the entire page. In case you didn't know, HTML is short for HyperText Markup Language. It's a "markup" language becuase it uses code, "markup," for layout, just like WritingML (short for Writing Markup Language). This is in contrast to word processors like MS Word which are "what you see is what you get" tools, also known as WYSIWYG. Gotta love them acronyms. Anyway, HTML is a super-powered markup language, full of complex coding capabilities. It's nothing like TEX, though, an even more complex markup language for typesetting mathematics, but that's another story.

Sorry. Sometimes I ramble.

Back to the main point. What I wanted was a way to build graphical interfaces for Writing.Com pages that were similar to my author page. I finally landed on the basic ideas described in this set of pages. They're simple, really, and they can give an uncluttered interface for users.

I wanted to keep the look of the page simple. I think this does it.

I wanted to avoid clutter. That meant having a limited color palette, and minimal text on the landing page. Limiting colors was really hard for me, since I like playing with color and effects in Photoshop. But lots of color can be distracting, so I had to give that up. It also meant having consistent typefaces throughout. That was an especially tough one for me. I love playing with fonts-a holdover from typesetting my first mathematics textbook.

I wanted it to be simple to maintain. Using separate files for each main topic and the insert command to put them into the page does that. It makes debugging the inevitable errors in WritingML much easier to track down, and an error in one of the page doesn't crash all of the others.

Most of all, I wanted the design to be easy for visitors to the page to use.

I hope this does all of these things.

I also hope that I've explained how to do these things in a way that makes it easy for you to copy. Nothing could please me more than seeing people copy these ideas.

Peace, and good writing to all.

▼

Shared Graphics Files

We've made four sets of blank buttons suitable for headlines on your pages. Zip archives of these button sets can be downloaded by pressing below

 

This link expires on 9/24/24. After that date, send requests for copies to Max Griffin 🏳️‍🌈 .

All images are © copyright 2023 by Max Griffin and are distributed under the provisions of the

Creative Commons CC-BY-NC License  

which permits free use of the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator (for example, in text area of your WDC image file).

The buttons are available in the twelve basic colors in four sets:

Rounded buttons with a lighter tint
Rounded buttons with no tint or shade
Rounded buttons with darker shade
Art brush strokes in a lighter tint

The Buttons. ▼

The buttons are sized at 400x60 px. Buttons are displayed here at half-size. There are similar sets, sized at 400x300 px, suitable for banners.

How to use these files ▼

These are BLANK buttons--no text in them.

You will need third party software to add your text to these files.

There are at least two online services that do this for free.
        https://onlinepngtools.com/add-text-to-png
        https://products.aspose.app/drawing/en/text-on-image/png
The first of these is reliable and free, but the free version limits you to five uses a day. The second is free and unlimited, but I've had inconsistent results with it. The second is easier (when it works), and the first is more fully-featured.

You can also use Paint (installed on all Windows systems) to add labels, but I've found the above websites easier to use. With Paint, it's hard to place your text where you want it, and once you click on the frame, you can't change the text OR its position--you can only delete the text and start over. In our case, that's usually preceded by shouting our compliments about the helpful design of the program.

Of course, if you have access to Photoshop or Corel Draw, that's the way to go, but in that case you don't need these images.

The buttons are larger than you will probably want to use, but are sized so it's easier to insert text. Font size should be roughly half the height of the button. Once you've put your text on the button, you can use {image:####-NN%} in your document to scale them. Recommended scaling is 50%.

Example Pages ▼

Here are a few pages we've designed using the techniques and ideas discussed here.

FORUM

Tales Shown, Not Told Discussion Forum  (18+) A short story contest with a focus on showing, not telling. #2295490 by Max Griffin 🏳️‍🌈

FORUM

Crosstimbers Review Forum  (18+) Free, honest, and in-depth reviews. #1848419 by Max Griffin 🏳️‍🌈

FORUM

23 Skidoo Contest  (E) 23 Skidoo Contest #2302607 by Max Griffin 🏳️‍🌈

                                                                               

Sample Contest Template ▼

we've created a sample template file for contests using some of the techniques in "Ideas on Page Design" . This sample template is fully customizable, and is complete with a set of buttons based on a short scan of those used in existing contests. The template is just a container file into which you can insert your own contest logo and information.

I've created a second set of more artistic-looking buttons with a brushstroke background and font, so there are now two versions of this. Here's what they look like:

STATIC

Contest Template Container  (E) Contest Template Container #2301609 by Max Griffin 🏳️‍🌈

STATIC

Generic Contest Container--Brush Theme  (E) Generic Contest Container--uses brushstroke background and font #2301639 by Max Griffin 🏳️‍🌈

These templates are based on the one used in

FORUM

Tales Shown, Not Told Discussion Forum  (18+) A short story contest with a focus on showing, not telling. #2295490 by Max Griffin 🏳️‍🌈

The template uses dropnotes as a navigational device. While you could just type your text for each button between the {dropnote} and {/dropnote} tags for that button, I recommned instead that you place that information in a static item. You can then use an {insert:#######} tag to insert the text into the template. This makes it easier to edit (and debug) the WritingML.

Note that {insert:#######} only works with static items and web pages. Also, the inserted text does not appear to "preserve spacing" no matter how you've set that option in your static items. Finally, while nested dropnotes are generally not permitted, if you use {insert:#######} with this template, the inserted static item may have dropnotes even though it is called from within a dropnote.

Feel free to use or modify this template as you see fit. If you use or modify it, please retain the copyright notice in the code below.

The code for each of these templates follows. To use it, copy it to your own file.

Code for standard generic contest ▼

{hide}
############## CODING NOTES 8/6/2023 ##############
This file must be customized for your contest.
Where it says ### <CONTENT> goes on the next line ### you have two options.
use an {insert:#########} to insert the number of a static item that has the content
OR type the content directly into this file, starting on the "next line" as indicated.
We strongly recommend that you place your content in separate static items and use the first method.
The countdown information at the end must also be customized or can just be hidden if you don't want to use it.
Additional buttons are available:
{image:2301606-50%} RULES
{image:2301604-50%} PROMPT (singular)
{image:2301709-50%} RESOURCES
{image:2301598-50%} BENEFICIARIES
Buttons are scaled at 50% to fit three across the page. Buttons scaled to 80% fit two to a line.
If you want to use differently sized buttons, you will need to change both the scaling and the arrangement of the buttons.
These buttons are CENTERED. The text underneath each button will also be CENTERED unless you surround it with
{left} TEXT HERE {/left}
############## END CODING NOTES ##############
{/hide}
{center}{image:2301610} {hide} ### PUT YOUR HEADER HERE ### {/hide}{/center}

{c:green}{i}{b}{size:4}Place a short introduction to your contest here.{/size}{/b}{/i}{/c}
{center}
{dropnote:"{image:2301607-50%}"} {hide} ### The Basics go on the next line ### {/hide}
{left} BASICS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301605-50%}"} {hide} ### Prompts go on the next line ### {/hide}
{left} PROMPTS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301600-50%}"} {hide} ### Guidelines go on the next line ### {/hide}
{left} GUIDELINES TEXT HERE {/left}
{/dropnote}

{dropnote:"{image:2301603-50%}"} {hide} ### Prizes go on the next line ### {/hide}
{left} PRIZES TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301601-50%}"} {hide} ### How to Enter goes on the next line ### {/hide}
{left} HOW TO ENTER TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301608-50%}"} {hide} ### What to Enter goes on the next line ### {/hide}
{left} WHAT TO ENTER TEXT HERE {/left}
{/dropnote}

{dropnote:"{image:2301602-50%}"} {hide} ### Past Winners### {/hide}
{left} PAST WINNERS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301599-50%}"} {hide} ### Donors ### {/hide}
{left} DONORS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301597-50%}"} {hide} ### Judging ### {/hide}
{left} JUDGING TEXT HERE {/left}
{/dropnote}
{/center}
{hide}
############## COUNTDOWN NOTES ##############
CONTEST COUNTDOWN
CUSTOMIZE WITH INFORMATION APPROPRIATE FOR YOUR CONTEST.
AS WRITTEN THE COUNTDOWN DOES THE FOLLOWING
places a limit of TEN in entries
Gives a closing date of August 7, 2023
Specifies a countdown ending date of 8/7/2022 0800, i.e, 8AM WDC time, August 7, 2023
Note that the date appears TWICE, once in the text and a second time in the countdown function.
Currently shows seven entries, three open slots, both in text and in symbols
############## END COUNTDOWN NOTES ##############
{/hide}
{center}
{center}{b}{u}{s:30}{/u}{/b}{/center} {hide} ### draws a line 30 spaces long ### {/hide}
Contest open for entries until we receive ten stories or {b}8:00AM August 7, 2023{/b}, whichever happens first.
Assuming we don't close early, the contest closes in {b}{c:red}{code:countdown('8/7/2023 0800')}{/c}{/b}
{b}Seven {/b}entries so far. {b}Three {/b} positions available.
{e:X}{e:x}{e:x}{e:x}{e:x}{e:x}{e:x}{e:notepady}{e:notepady}{e:notepady}
{center}{b}{u}{s:30}{/u}{/b}{/center}
Questions or comments about the contest?
please contact {hide} ### Your name here ### {/hide}
{/center}
{center}{b}{u}{s:30}{/u}{/b}{/center}

                                                           

Code for brushstroke Generic Contest ▼

NOTE: the Standard Generic Contest has centered menu items and inserts additional code to align the corresponding text to the left. The Brushstroke Generic Contest does NOT have centered buttons and so needs no additional alignment code. If you want centered buttons, change this code accordingly, using the Generic Contest as a guide.

{hide}
############## CODING NOTES 8/4/2024 ##############
This file must be customized for your contest.
Where it says ### <CONTENT> goes on the next line ### you have two options.
use an {insert:#########} to insert the number of a static item that has the content
OR type the content directly into this file, starting on the "next line" as indicated.
We strongly recommend that you place your content in separate static items and use the first method.
The countdown information at the end must also be customized or can just be hidden if you don't want to use it.
Additional buttons are available:
{image:2301606-50%} RULES
{image:2301604-50%} PROMPT (singular)
Buttons are scaled at 80% to fit two across the page.
If you want to use the differently sized buttons you will need to change both the scaling and the arrangement of the buttons.
############## END CODING NOTES ##############
{/hide}
{center}{image:2301610} {hide} ### PUT YOUR HEADER HERE ### {/hide}{/center}

{c:indigo}{i}{b}{size:4}Place a short introduction to your contest here.{/size}{/b}{/i}{/c}

{dropnote:"{image:2301637-80%}"} {hide} ### The Basics go on the next line ### {/hide}

{/dropnote}{dropnote:"{image:2301626-80%}"} {hide} ### Guidelines go on the next line ### {/hide}

{/dropnote}
{dropnote:"{image:2301635-80%}"} {hide} ### Prompts go on the next line ### {/hide}

{/dropnote}{dropnote:"{image:2301628-80%}"} {hide} ### Beneficiareis go on the next line ### {/hide}

{/dropnote}{dropnote:"{image:2301638-80%}"} {hide} ### What to Enter goes on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301629-80%}"} {hide} ### How to Enter goes on the next line ### {/hide}

{/dropnote}
{dropnote:"{image:2301633-80%}"} {hide} ### Prizes go on the next line ### {/hide}

{/dropnote}{dropnote:"{image:2301632-80%}"} {hide} ### Past Winners### {/hide}

{/dropnote}
{dropnote:"{image:2301706-80%}"} {hide} ### Donors ### {/hide}

{/dropnote}{dropnote:"{image:2301631-80%}"} {hide} ### Resources ### {/hide}

{/dropnote}


{hide}
############## COUNTDOWN NOTES ##############
CONTEST COUNTDOWN
CUSTOMIZE WITH INFORMATION APPROPRIATE FOR YOUR CONTEST.
AS WRITTEN THE COUNTDOWN DOES THE FOLLOWING
places a limit of TEN in entries
Gives a closing date of August 7, 2023
Specifies a countdown ending date of 8/7/2022 0800, i.e, 8AM WDC time, August 7, 2023
Note that the date appears TWICE, once in the text and a second time in the countdown function.
Currently shows seven entries, three open slots, both in text and in symbols
############## END COUNTDOWN NOTES ##############
{/hide}
{center}
{center}{b}{u}{s:30}{/u}{/b}{/center} {hide} ### draws a line 30 spaces long ### {/hide}
Contest open for entries until we receive ten stories or {b}8:00AM August 7, 2023{/b}, whichever happens first.
Assuming we don't close early, the contest closes in {b}{c:red}{code:countdown('8/7/2023 0800')}{/c}{/b}
{b}Seven {/b}entries so far. {b}Three {/b} positions available.
{e:X}{e:x}{e:x}{e:x}{e:x}{e:x}{e:x}{e:notepady}{e:notepady}{e:notepady}
{center}{b}{u}{s:30}{/u}{/b}{/center}
Questions or comments about the contest?
please contact {hide} ### Your name here ### {/hide}
{/center}
{center}{b}{u}{s:30}{/u}{/b}{/center}

How to rearrange the buttons in these templates ▼

WritingML is what is called a markup language. This means you enter snippets of code into your text which, when displayed, results in a formatted text. This is different from a WYSIWYG (what you see is what you get) editor like Word. The downside is that Word is better described as what you see is all you get. Word has lots of features, but you're pretty much stuck with what the wizards at Microsoft think you need.

Anyway, WritingML is a markup language, and you're probably familiar with using markup to format your documents. Even if you're not, you can rearrange the buttons in these template files. Below I've outlined hyper-detailed steps on how to do this. Please don't be offended by the detail, and please be aware that there are some reasons for it. In particular, dropnotes add an order of complexity to your markup. The more complex your markup, the nastier it is to find and correct mistakes. One reason for the detail is that we've had some experience with the ways things can go amiss when you want to rearrange the buttons. Based on this experience, we've suggested some extra steps, like first arranging the buttons so the appear in one column.

Anyway, with that prelude, there is one important step you need to do BEFORE attempting to rearrange the buttons.

Make a BACKUP of the file, so if something goes wrong you can recover. To make a backup, display the page you want to edit, and open it with the full screen editor. Select the contents, press <CONTROL> C to make a copy of the contents in your paste buffer. Now open a new, blank document with your word processor or notepad. In the new document, press <CONTROL> V, which will copy the contents of your paste buffer into this new file. If something goes wrong in editing your contest, you can simply reverse this process to replace the contents of your contest file with the contents from this backup.

You've got your backup done, right? No? Then do it now, before you read any further. It's inevitable something will go wrong and you'll be sorry you don't have a backup.

Ok, we'll trust that you've really and truly backed up your file, so here is how to rearrange the buttons.

Step 1. Write down the order in which you want the buttons to appear.
Step 2. Open your file with the full screen editor and look for all the places where you see {/dropnote}{dropnote:} together, one one line, with no linefeed or or space between them.
Step 3. Insert a linefeed (carriage return) between the {/dropnote} and the {dropnote:}

{ If you save the file now and then display it, you will see all the buttons in a single column.
When the {/dropnote}{dropnote:} are together with no linefeed, your browser will try to display the two buttons on the same line.

Step 4. The code for the buttons is now arranged in groups of three, with each group representing one button. This makes them easier to rearrange in your desired order.

Carefully highlight a group of three that you want to move and press <CONTROL> X.
This erases the group of three, but saves it to your paste buffer (so it's not gone until you press another <CONTROL> X or <CONTROL> C.
Position the cursor where you want this button to appear on your list and press ENTER to be sure you start a new line.
Press <CONTROL> V to copy the group of three that you just deleted with the < CONTROL> X

STEP 5. Repeat this process until the groups-of-three are in the order you want.
STEP 6. Save the file and view it. You should see the buttons in the desired order in one long column.

If it doesn't display properly or they are in the wrong order, try editing the file to fix your mistake.
Most often the error is that one or more of your copy steps missed an open open { or a close }.
If all else fails, recover the original file from your backup and start over.

Step 7. If the file displays the buttons correctly and in the proper order, you're ready to put groups of buttons a single line.

To do this, edit the file in the full screen editor.
Find the {/dropnote} that ENDS the LAST dropnote on what you want to be your FIRST LINE.
Position the cursor at the end of that line and press <DELETE> until the {dropnote:"} that STARTS the the NEXT line of buttons is on the same line as the {{/dropnote}.
Be careful to NOT delete a { or } at this point. If you've done it right, you'll see {/dropnote}{/dropnote:"}} on the same line.
Be careful to not split the text inside the double quotes of the {dropnote:"} tag.

Step 8. If you're extra careful, save and display the file to be sure this step worked.
Step 9. Repeat steps 7 and 8 until the buttons are grouped and in the order you desire.

                                                                               

Revision History
                                       
8/16/2023
Simplified banner for launch page.
Added discussion on centering of menu items.
Revised code on launch page and Standard Generic Contest to center menus and uncenter inserted text.
Changed example code for each of the above in the related articles.