Ideas on Page Design-Alt Design Layout

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.