// Internet Duct Tape

5 Habits for Writing for the Web

Posted in CSS and Web Design, Technology by engtech on August 31, 2006

These are the steps I follow for painless web publishing. I’ve been writing on the Internet since 1994, and these habits have become second nature to me. I recently introduced a friend to writing on the web, and it was interesting watching him hit problems I never would have because of the habits I’ve formed.

This is a guide for the technical issues of avoiding formatting problems, not the specifics of writing good articles. The goal is to generate human readable HTML code. If a person can read your HTML code and understand it, then every web browsing software will be able to.

A Primer

Content is the stuff you are writing and want to publish on the Internet . Publishing is the act of putting your content online. Content is accessed using an address or URL (uniform resource locator). The URL for my blog is http://engtech.wordpress.com. Dead links are URLs that go to web resources that no longer exist.

The World Wide Web displays content using web pages. Web pages use normal text along with formatting information. The formatting is done using a simple mark-up language called HTML (hyper text markup language).

HTML embeds formatting information (mark-up) into the text using HTML tags.

To bold text use <b>text</b>.

text

Web pages have another mechanism for formatting called CSS (cascading style sheets). CSS gives very fine control over the display of HTML tags. With CSS you can specify that Bold tags have a font size of 11pt, use the Verdana typeface, have a specific weight, and a specific colour. All Bold tags on any page that include that style sheet will look that way. It makes it easier to modify content than hand tweaking every instance of the Bold tag.

A web browser is software that displays text formatted with HTML tags.

Your readers use different platforms than you. They will use different operating systems (Windows 98, Windows XP, Windows Vista , Linux, OS X ), different web browsers (Internet Explorer, Firefox, Opera) and different versions of those web browsers (IE 5, IE 6, IE 7). They’ll even try to read your page on mobile phones, news feed aggregators, and through email. All of these platforms will display content with slight differences. Understanding all of the intricacies is a full time job.

RSS (really simple syndication) is a way to view web content as a syndicated feed. It’s like having a spam-free inbox that web pages are delivered to. Instead of visiting the web site in your web browser, the RSS reader checks pages for you and notifies you only if it is updated.

With that basis of terminology, these are my recommended habits for formating content for the web.

#1: Split writing and formatting into two distinct steps

Write and edit your text first. Add formatting as a final step. It is easier and less error prone to add formatting once you have completed and corrected the content. The second step of adding formatting also catches additional content errors.

This is the process I use Content >> Structure >> Style

  • Write plain text with paragraph breaks.
  • Edit text for spelling, grammar and clarity.
  • Insert links and images.
  • Insert additional formatting (bold, headers, horizontal lines).
  • HTML preview and additional editing.

#2: Limit yourself to consistently supported HTML tags

Keep It Simple Stupid. Using a small subset of HTML mark-up in your posts increases the chance that it will look the same across all web browsers, guarantees that it will be readable by all feed / RSS readers, as well as email programs. It also guarantees that you’ll be able to globally and consistently change the look of your site at any time using CSS.

  • I use Bold, Heading2, Heading4, Block-quote, Paragraph, Page break, Horizontal Line, and Unordered List. That’s it.
  • Sometimes I like to get a little crazy and throw in Italics or Tables for special cases.
  • In Writely you can find these HTML tags under the Insert and Style drop-down menus.

These are how the tags look on my blog:

strong or bold <b> or <strong>

italics or emphasis <i> or <em>

heading2 <h2>

heading4 <h4>

blockquote <blockquote>

horitzontal line <hr>


unordered list <ul>

  • one <li>
    • one.five <li><ul><li>
  • two <li>

ordered list <ol>

  1. one <li>
    1. one.five <li><ol><li>
  2. two <li>

#3: Stay away from Microsoft Word

wp-paste-from-word.pngMicrosoft Word is poison for HTML. It does horrible things to HTML code. Using Microsoft Word is the *single* worst habit you can have for developing web pages, unless you are careful.

  • Auto-completion will convert normal text to characters that won’t display properly in all web browsers (IE: –, ‘)
  • Special characters inserted into Word won’t display properly in HTML (IE: ©, ®, °)
    • Both of these options can be turned off under
      Tools >> AutoCorrect Options >> delete symbols from the lower box
  • Cut-and-pasting from Word into your blog editing program will add additional formatting that you never intended.
    • Click on the HTML raw source and look at how ugly it is.
    • Every one of those unnecessary HTML tags is a potential reason why your web content won’t look like you intended it to.
  • As a final resort it is possible to remove formating from Word documents by cut-and-pasting into Notepad (not Wordpad !!) and then cut-and-pasting the text from Notepad into your blog editing software.

Word, Ctrl-A, Ctrl-C, Notepad, Ctrl-V, Ctrl-A, Ctrl-C, blog software, Ctrl-V.

Which code do you think works cross-platform, displays correctly in any HTML reading application, is more maintainable and less prone to errors?

<p class=”MsoNormal” style=”MARGIN: 0in 0in 0pt”> <b style=”mso-bidi-FONT-WEIGHT: normal”><span style=”FONT-SIZE: 16pt; FONT-STYLE: normal; FONT-FAMILY: ‘Times New Roman’”>Title Goes Here<?xml:namespace prefix = o ns =”urn:schemas-microsoft-com:office:office” /><o:p></o:p></span></b></p>

OR

<h2>Title Goes Here</h2>

UPDATE: I’ve since changed my stance on Microsoft Word and now I do all of my blogging in Word first. WordPress.com *CAN* convert Microsoft Word documents to proper HTML. Use ALT-V in the Editor and then select the “Paste from Word” option.

My process is now:

  • use Word to write a very barebones document (page breaks, bolding, italtics and links only)
  • use the Paste from Word option to copy the document into WordPress
  • apply additional formating like headers, lists, blockquotes and add images.

#4: Don’t change the font typeface, the font size, or the font colour

Web documents use Cascading Style Sheets (CSS) to add consistent formatting to an entire site. You run the risk of creating conflicts by modifying font typefaces and font styles directly in your post. How fonts are handled depends on the operating system and web browser of the reader — things that are out of your control. Add emphasis to your text using standard HTML mark-up like Bold, Italics, Underline, Strike-through or one of the six Header sizes.

  • Changing the font to distinctly denote blocks of text is OK if used sparingly, but you’re better off using the Block-quote tag.
  • Imagine changing all the text on your website to use <font color=”white”>. The entire site becomes unaccessable to people who are trying to read it with a white background.
  • There are many, many ways that someone could get the HTML tag font colour but not the web page background colour.

#5: Host images yourself

switcheroo.pngIt’s very easy to copy the address of an image hosted elsewhere on the Internet (called hot linking). But this does not mean that the image will still be at that location in the future. Web sites go down, and links to external images will become broken. Either directly upload the image to your blog, or use an intermediate site for image hosting like Photobucket or Flickr.

>> Image hotlinking from the perspective of someone whose images are being stolen.

>> If you hot link images they may get changed behind your back.

Bonus #6: Be Careful with MORE (WordPress only)

wp-custom-more.pngWordPress lets you insert a MORE tag to break the post so that the part AFTER the MORE tag shows up only when you look at the post as a single web page (not part of the main page or in categories/search results).

This is a great feature but it has two problems:

  • If you put the MORE between HTML tags then the tag will never complete. This means you could apply bold, italics, font sizes, typefaces and colours to EVERYTHING that displays after that post. Avoid this by always using the MORE tag on a blank line with all the tags before it closed.
    • It is a nightmare if you combine the ugly Microsoft Word formatting with a misplaced MORE tag.
  • The MORE tag may not display in RSS feeds — the post may just be cut-off.
    • This seems to be theme dependent (or they’ve fixed the bug, I’m not sure)
    • Customizing the MORE tag will make it definitely show up in RSS feeds.

Bonus #7: Don’t change post dates (WordPress only)

wp-timestamp.pngIt can be tempting to change the timestamp on an old post to bring it the front of your blog, but you are shooting yourself in the foot. The date makes the first part of the URL for your post. If you change it you break all links to that post. Sure, you can go through the effort of trying to find every place you linked to it, but you can’t change people who have already linked to it.

Leave those dates alone. Instead write a summary post to highlight old content that is still good.


Related Posts


Bookmark this diggsm.gif Digg | delicioussm.gif Del.icio.us | blinklistsm.gif BlinkList | furlsm.gif Furl
spurlsm.gif Spurl | redditsm.gif Reddit | simpysm.png Simpy | rawsugar.jpg RawSugar

21 Responses

Subscribe to comments with RSS.

  1. Mike said, on August 31, 2006 at 4:31 pm

    I’m making you my chief techology evangelist in my new kingdom, another great read.

  2. Ray Dotson said, on September 03, 2006 at 5:03 am

    This is great advice for the beginning web writer and a good reminder for those a little more experienced. I’m sure you won’t mind if I link to it on my blog.

  3. [...] I found a new blog that has some really good tips for beginning web writers. It’s geared mostly toward Windows users, but most of the advice is applicable regardless of your OS. The gist of it is that you should keep things simple and develop good habits in your web writing. [...]

  4. engtech said, on September 03, 2006 at 10:48 am

    I don’t mind at all. Thanks for the link, Ray.

  5. Wordpress Tips - Alt-B « //engtech said, on September 03, 2006 at 12:22 pm

    [...] 5 Habits for Writing on the Web [...]

  6. A.J. Valliant said, on September 05, 2006 at 10:42 pm

    1 and 5 have saved me a whole lot of formating battling.

  7. [...] I can’t stress how important it is to have a page lying around like this one where I have examples of all the HTML tags I commonly use.  It makes theme selection much easier, because I can immediately test how my pages will look. [...]

  8. clumy half-ninja said, on September 06, 2006 at 4:29 pm

    like you, this stuff has become second nature to me. it’s interesting to see it all laid out in sequence. thanks!

    question: haven’t ‘b’ and ‘i’ been replaced ‘strong’ and ‘em’ for emphasizing text according to w3c standards?

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-emphasis

  9. engtech said, on September 06, 2006 at 6:26 pm

    Yeah, EM and STRONG have replaced B and I for in the XHTML spec. I’m still in 1994 though. :)

    The wordpress editor also inserts B and I as such.

  10. clumsy half-ninja said, on September 06, 2006 at 9:10 pm

    yeah, same with forum software like phpBB. i don’t blame them, as most users aren’t necessarily coders, and “I” and “B” make a whole lot more instinctual sense.

  11. engtech said, on September 06, 2006 at 10:38 pm

    The whole push with XHTML is to break semantics from formatting. So you mark something as STRONG or EM and then your style sheet decides how that is displayed.

    Where as Bold and Italtic obviously are specific types of formatting, which can cause confusion if your style sheet says Bold is makes text green and Italic turns the text upside down.

  12. All Posts by Title « //engtech said, on September 16, 2006 at 9:40 am

    [...] 5 Habits for Writing for the Web Blogging, Articles [...]

  13. inadvertentgardener said, on October 16, 2006 at 2:45 pm

    This is great stuff, engtech. A lot of it’s stuff I already knew (confounded Word and the junk it creates, for example), but was good refresher information. And there was good, new stuff in here, too, even for me, and I consider myself to be middle-of-the-road experienced with this stuff. Thanks for compiling this!

    Genie
    The Inadvertent Gardener

  14. [...] >> 5 Habits for Writing for the Web [...]

  15. The Rooster said, on October 19, 2006 at 4:27 pm

    Great tips. I find that the WYSIWYG for WP.com is fine but I do have some troubble with the other blog that is a WP stand alone. I probably should work with HTML but I can’t get used to working with it. I guess it is just practice! The links are what get me, I need Nuv…

    Thanks for the post

  16. engtech said, on October 19, 2006 at 7:50 pm

    Have you considered using a separate app for composing blog entries?

    I’ve heard good things about Performancing and Blogdesk.

  17. [...] 5 Habits for Writing for the Web [...]

  18. [...] 5 Habits for Writing for the Web This entry was written by engtech and posted on October 16, 2006 at and filed under From the [...]

  19. [...] 5 Habits for Writing for the Web Technical tips you need to know when writing online [...]

  20. Cancane said, on July 05, 2008 at 10:45 am

    This is great stuff

  21. jammer said, on July 05, 2009 at 12:03 pm

    yes ten yoouuu


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: