Category Archives: web writing

Web writing is the art of writing for the web. It can involve “blogging” but web writing includes journalism, citizen journalism, personal blogging, technical writing, marketing writing, social media writing, multimedia publishing (podcasts, audio, video, images, galleries), poetry, fiction, and all the different kinds of writing you could experience in books, text books, magazines, newspapers, and anything that can hold pictures or words. We call it “web publishing” today, but it is the art of having your say on the web.

Technical Writing and Writing for the Web

Posted on by
Reply

The following are the workshop notes for a presentation I gave recently to Portland Community College’s Technical Writing class. The topic was on web writing and writing for the web.

The main topics I covered in the workshop included:

  • Web platforms
    • Web publishing
    • Online personas
  • Writing for the Web
    • Web writing structure and format
    • Myths and Facts
  • Search Engine Optimization (SEO)
    • Demographics
    • Writing for your audience

Terminology

The following are terms and jargon used in blogging and social media.

  • Blogging: Publishing on the web through websites (blogs) and social media. Facebooking and Twitter are blogging, specifically microblogging.
  • Photoblogging: Publishing photography and words on the web through websites and social media.
  • Vlogging: Publishing video on the web.
  • Podcasting: Publishing scheduled and syndicated multimedia content on the web.
  • Social Media: Online marketing and community building.
  • SEO: (Search Engine Optimization) The process of making a site search engine friendly through code and content. Modern term for developing a site for search engine attention and distribution, aka marketing.
  • Web Publishing: Publishing on the web, sharing multimedia content in the virtual community.
  • Syndication: The distribution of content on the web through feeds.
  • Blog: A blog is a website with content displayed in reverse chronological order.

Continue reading →

Workshop: Words and Pictures

Posted on by
Reply

The following are the workshop notes for Newspace’s Words and Pictures by Lorelle VanFossen in Portland, Oregon.

The workshop covered the following:

  • Writing for Audience and Search Engines:
    • Virtual Storytelling Techniques
    • Community Building
    • Writing for Social Media
    • Finding Inspiration and Motivation
  • Technical:
    • Tips and Tricks
    • Article Structure and Formatting
    • Image Embedding
    • Links
    • Site Core Content
    • Feeds
    • Editorial Calendars

Robert De Niro, quote from Oscars 2014 Show about writers.The following are resources and references to help you take the next step forward in writing for the web for photographers and photobloggers. Continue reading →

Web Writing: The Editorial Article

Posted on by
7

Editorial writing consists of writing and publishing an article that takes a stance on a topic. The position must be supported with documentation, reference material, and quotes.

Editorial writing for the web is based upon the fundamentals of traditional editorial writing, similar to op-eds but slightly different, modified by the needs of the web reading audience.

An op-ed piece is an opinion. It is distinguished from other articles in a magazine and newspaper as they may be well written but they do not represent the rules and guidelines required by journalists and reporters. The writers are typically not reports, nor educated in journalism.

An editorial article may be an opinion piece, but it is one that argues a specific point or perspective. On the web, an editorial article may be written by a reporter, journalist, professional writer, or anyone with a defensible opinion.

This article explores the specifics of editorial articles written and published on the web, specifically on blogs. It covers the basics of a web-based editorial article with tips, techniques, guidelines, and references. It is used by the students at Clark College in the web publishing courses taught by Lorelle VanFossen, and may be used by other educators. Continue reading →

Stats: The Analytics of Reading to the Bottom of the Page

Featured

Posted on by
1

In “How people read online: Why you won’t finish this article” on Slate Magazine, author Farhad Manjoo explores the statistics on whether or not you will read to the bottom of his article.

I’m going to keep this brief, because you’re not going to stick around for long. I’ve already lost a bunch of you. For every 161 people who landed on this page, about 61 of you—38 percent—are already gone. You “bounced” in Web traffic jargon, meaning you spent no time “engaging” with this page at all.

So now there are 100 of you left. Nice round number. But not for long! We’re at the point in the page where you have to scroll to see more. Of the 100 of you who didn’t bounce, five are never going to scroll. Bye!

OK, fine, good riddance. So we’re 95 now. A friendly, intimate crowd, just the people who want to be here. Thanks for reading, folks! I was beginning to worry about your attention span, even your intellig … wait a second, where are you guys going? You’re tweeting a link to this article already? You haven’t even read it yet!

He talked to many expert web analytics researchers and analysts about the statistics associated with reading an article on the web. The numbers are fascinating, and may change how you write your next post.
Continue reading →

Tutorial on Creating Footnotes in WordPress

Featured

Posted on by
4

Footnotes are often requested in my workshops and classes. I’ve published “Creating Footnotes in WordPress” explaining how to do this in WordPress on .

Footnotes have been replaced by links, but there may be times when you wish to link to a footnote in a blog post.

Here is a list of the pros and cons of using footnotes from the article.

Links cover one or more words thus are easier to see and easier to click over a larger area. Footnote links are tiny, hard to see, and hard to click, especially if you have mobility issues.

Footnotes are familiar to academics, scientists, and researchers. If you are publishing such papers or writing for that audience, it would be natural to include traditional footnotes.

There are also times when you may need to cite a source that isn’t online. How would you site a paper or reference that is not online? A footnote serves to cite the source while not interrupting the natural flow of the content with explanations in parentheses.

Three techniques are described in the article.

You may use WordPress Plugins that make adding footnotes to posts easier, or you can create them manually.

The process of adding footnotes manually to WordPress involves using jump or page links with the footnote numbers within the content to “jump” down to the footnote list at the bottom of the post.

I’ve included an example of how to create footnote jump links to take the reader to the footnote list and not a specific item in the list, and how to create a footnote jump link to a specific footnote in the list if there are many footnotes in the article.

Family History Blogging Resources and Tips

Posted on by
4

Knapp family of Taylor Rapids, Wisconsin, Ed, Lloyd, Melvin, Emma, Glenn, Nora, circa 1924 - Lorelle VanFossen archives.The following information are resources, tips, techniques, and instructions for starting and developing a Family History blog. These resources are for Lorelle’s family history blogging workshops, classes, and presentations. The focus of these resources are on blogging your family history, not about genealogy research, though it is often hard to separate the two.

This resource list will help you learn more about using , the self-hosted version of WordPress, and , the hosted verion of WordPress, as well as how to publish multimedia, gedcom files, and share the stories and tales of your family’s history. It also includes information on privacy and other legal policies as relates to family history research and blogging.

Family History Blogging Articles by Lorelle VanFossen

The following links are to articles I’ve written on family history blogging, including an ongoing series on genealogy blogging.

Resources on Blogging Your Family History

The following are articles and tutorials on how to blogging your family history. Continue reading →

How to Add Images in Your Post Content

Posted on by
15

Round beach rocks in shade - photography by Brent VanFossen.Images, graphics, photographs, drawings, cartoons, badges…our websites are filled with imagery.

This article addresses the techniques used by WordPress for aligning images and image sizing and links in published content. Check your publishing platform for their methods.

Image Terminology in WordPress

There are several terms we need to develop to help you understand how images are used in WordPress. The most important terms describe the images within WordPress based upon how they are used and generated: original image, published image, media file, and attachment image.

The image uploaded to your site is called the original image or image file. When uploaded to WordPress, a minimum of three sizes are automatically created and stored in the wp-content/uploads/ directory on the server. The images are grouped by year then month by default.

The image sizes available for displaying in your content are thumbnail, medium, and full-size. Depending upon the image’s original size, large and x-large may be available. Full-size is the original uploaded image size.

When an image is used on a web page in WordPress, it is typically viewed within the content area of a post or Page. For the sake of this tutorial, we will called this the published image. WordPress makes available the three size options by default.

Image Sizes and Links

WordPress Media Uploader featuring multiple images - screencap by Lorelle VanFossen.

The WordPress Media Uploader redesigned in 2012 now features Attachment Display Settings options. They include setting the alignment of the image, the size of the published image, and the Link To feature. Continue reading →

What is a Properly Formed Link?

Posted on by
93

I talk about properly formed links or proper HTML anchor tags in all of my articles, workshops, and classes. This article serves as a tutorial and reference guide on the proper formation of HTML links.

Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.

In “What You Must Know About Writing on the Web,” I describe a link dump:

Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.

A link dump is when the blogger is lazy and just pastes the link into their post such as https://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.

Which is easier to read?

A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.

How to Create a Properly Formed HTML Link

To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link.
Continue reading →

The Open Access Publishing Explained for Scientific Papers

Posted on by
Reply

Nick Shockey and Jonathan Eisen of PHDComics tackle the subject of open access for the publishing of scientific and research papers, helping us better understand how this all works, and publishing when publishing is not limited by professional journals.

How to Add HTML in a WordPress Blog Post

Posted on by
25

Most WordPress users spend their blogging life in the Visual Editor, the WYSIWYMG editor. Yes, it is the What You See is What You MIGHT Get editor.

While WordPress does what it can to make the Visual Editor emulate what your content will look like once published within your WordPress Theme, it has limits.

One of the limits is that is appears hard to publish HTML in a blog post. It isn’t. You just need to switch to the HTML or Text Editor on the Post/Page Panel.

Before you can publish code on your WordPress blog, there are some things you must know.

  1. WordPress automatically fixes poorly formed code. If you mess up a link or HTML element, WordPress doesn’t recognize it as properly formed code so it will “fix” it for you by replacing < with &lt; or change other code to make it appear as text.
  2. WordPress automatically strips out unwanted or broken code. If you are on , you are not permitted to publish JavaScript, PHP, or other code within your blog posts or elsewhere. But you can publish HTML if you have written it properly in the HTML/Text Editor.
  3. The WordPress Visual Editor expects everything within it to be publishable text or a shortcode, code that displays video and other media or features.
  4. The WordPress HTML/Text Editor expects everything within it to be HTML or something WordPress can use to generate HTML.
  5. WordPress recently changed the name of the HTML editor to Text editor in WordPress.com. This change may be in an upcoming release of WordPress.

There are 66 HTML codes permitted in WordPress posts, Pages, and widgets, codes you can use to make lists, links, blockquotes, images, headings, whatever content you wish to add to your site. Continue reading →

Blog Writing: Imagine You’ve Been Blogging for the Past Five Years

Posted on by
Reply

Can’t think of anything to blog about?

When choosing your blog topics, realize you could be blogging about this topic for years, coming up with new ideas all the time, sometimes daily.

Two photographs of a cat looking out the window of a house, from Band of Cats site.I recently found Band of Cats, a site by an owner of 4 cats, stuffed with funny cat pictures of their own cats plus any other cats, and cat stories, they can find on the web. The first post was July 27, 2007.

While Band of Cats doesn’t publish daily, though they did through most of 2008, they continue to update their site with cat art, cat pictures of the month, holiday cat pictures and items, cat products, and more. While they publish irregularly now, that’s still a huge commitment to the subject of cats.

Think about your own subject matter and imagine you’ve been blogging about it since July 2007 (or pick another date). What would your blog have covered during the past five years?

Usually, we have to project into the future what topics we would blog about. Why not take this backwards and imagine what you would have blogged about if you had been blogging about something for the past five years.

What You Must Know About Writing on the Web

Posted on by
19

1975.

While that number might mean different things to you, like your birthday, an anniversary, graduation year, part of a lottery number – to me it represents a quota.

Several years ago, a fan counted up all the articles I wrote every year and came up with an estimate of 1,975 articles published annually across multiple sites.

I was stunned. No, staggered. I now had a number. I didn’t know what to do with it. It freaked me out. That’s 164 articles a month. Thirty-eight articles a week. Five and a half a day. That’s a lot.

Don’t even ask to add up the word count. I couldn’t. Yet, the same person estimated that I wrote 2,370,000 words annually.

It took a long time for me to come to grips with that number. I worried when I became smarter with my time and dropped some of the online columns and magazines to concentrate on more influential sites. What if I couldn’t keep up with the numbers?

After a while I gave up and realized it was just a number. Like a random phone number or birth date. Another number not to worry about. Much.

Along the way to generating all those words every year for many years on end, I learned a few things worth sharing. Continue reading →

Web Page Annotation and Markup on Live Web Pages

Posted on by
Reply

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics.In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

What is a Website Call to Action?

Posted on by
3

Call to action button called click me with quote that says go on, you know you want to.What is a “call to action” on a site?

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:
Continue reading →

The Basic Structure of a Blog Post

Posted on by
13

There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.

The structure of an article or content on a web page is the same for any web publishing platform. This article focuses specifically on WordPress but the principles apply whether you are on Blogger, Google+, LinkedIn, Drupla, Joomla, Facebook, or a forum.

If an article is long, and this is, and divided up into separate sections, a table of contents consisting of jump links that jump down to the section the reader wishes to get to first, or second, or whatever their reading preference might be.

The table of contents maybe a list within the article or featured in a box aligned to the right or left of the content area with text flowing around it, best left to those with some HTML and CSS skills.

Article Table of Contents

WordPress Tip: Every WordPress Theme handles the basic elements in a post differently, making the headings stand out in a variety of ways, adding borders around images or not, adding design elements to a blockquote…the list is long.

I recommend that you test your own WordPress Theme by writing a test post following the examples in this article, or you may use the Sandbox Post for Testing WordPress Themes. It is a text file with HTML code representative of all the HTML tags found in a blog post.

Formatting the Post in WordPress

Before we begin, I will be making references to the formatting toolbar found on the post and Page Edit Screens. It is blow the post title area and directly above the content textarea where you will write your post.

The WordPress Visual Editor Toolbar featuring the Kitchen Sink Button which expands to feature a second row.

By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink or Toolbar Toggle. If you click it, a second row will drop down. Continue reading →