Technical Writing and Writing for the Web

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

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

WordPress Site Structure and Organization

This article supports my recent presentation at PDX WordPress Meetup titled “Organizing Your WordPress Site.”

Please note that I’ve included articles from ClarkWP Magazine, the student run and managed site for my Clark College WordPress classes, as reference material throughout this article.

Before beginning to structure and organize, or reorganize, your WordPress site, there are some WordPress terms you need to know.

Whiteboard with site structure.

Continue reading

Web Writing: The Editorial Article

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

Lorelle Presents Writing with WordPress Workshop in Salem, Oregon

If you live in the Salem, Oregon, area, don’t miss this special event and workshop.

I’ll be leading a workshop in Salem, Oregon, specifically designed for writers and authors using WordPress. The event is part of the great work the Salem Chapter of the Willamette Writer’s Group, a regional group of writers and authors in the Pacific Northwest area.

The events begin with a presentation on Wednesday, March 12, 2014, at 6:30PM at Macey’s Salem Center. I will be talking about the challenges of a writer and author site, and introducing members to the different types of sites for writers and authors and how to build a community and audience around a site or book. The meeting is free, I believe.

Sunday, March 16, is a half-day workshop from 1-5PM at the Salem Public Library. We will dive deeper into customizing a WordPress site specifically for the needs of the writer, be it for the author and their books, to support a book or book series, and other alternative site types. This is a highly interactive workshop.

Participants in the workshop will need to bring their laptops or tablets. WIFI will be available. If participants do not have a current WordPress site, they will be led through the process of setting up their own free WordPress.com site.

The workshop will be customized based upon the needs of the attendees, so here is a general list of topics covered during the four hour workshop: Continue reading

Tutorial on Creating Footnotes in WordPress

Featured

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.

How to Add Images in Your Post Content

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?

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

This is an Example of a Blockquote

According to Lorelle:

We are all born with two ends. One is used for sitting. The other is not. Success in life depends upon which one you use the most. Heads you win. Tails you lose.

This is great wisdom of the ages, applicable to everyone, especially students.

I’m reminded of the old Hillbillies television show. There was an episode with the son, Jethro, where he decided, after jumping into the cement pond and bashing his head on the bottom, that he had a light bulb idea. He wanted to go to a fancy universiteee and become a world-famous neurosurgeon. His dad took one look at his son, trying to find a reason to feel pride and stay politically correct, and said, “Ain’t hope wonderful.”

Don’t be a Jethro.

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

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

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

What is a Website Call to Action?

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

Tutorial: How to Inspect, Edit, and Save a Web Page

This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:

  • View the source code of a web page.
  • How to save a web page to your computer
  • How to view a saved web page on your computer
  • How to open a web page in your text editor
  • How to view the CSS/Stylesheet for a web page
  • How to inspect the HTML and CSS of a web page
  • How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

  1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
  2. Right click on an empty space on the web page and choose View Page Source or View Source.
  3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
  4. You may save this to your hard drive or go back and save the entire web page to your computer.

Continue reading

Links and the Anchor HTML Tag

This is a tutorial from the HTML Fundamentals Class I taught at Clark College in Summer 2012. It applies to HTML and WordPress.

There are five basic forms of links on a web page.

  1. External Links
  2. Internal Links
  3. Jump Links
  4. Image/Multimedia Links
  5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>
  1. a: The HTML Anchor tag.
  2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
  3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
  4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

Continue reading

Creating a Blogging, Social Media, and Editorial Calendar and Schedule

Nothing to blog about on picture of desert sandsSportsBusiness Journal has one. So does eSchool Media Marketing, GeneaBloggers Genealogy Blog, SheKnows Magazines, and REALTORĀ® Magazine. Not only do they have one, they redo it every year. What could these very diverse companies have in common? An editorial calendar.

An editorial calendar is critical for the online publisher and web worker today. In traditional media, an editorial calendar was the year planned out in advance on editorial topics, articles, themes, article series, and events. Today, the editorial calendar goes even further covering social media, marketing, advertising, and virtual and direct social interaction. Whether for the individual blogger or a company, an editorial calendar sets goals and deadlines to keep you on track.
Continue reading