ScribeFire blog editor for FireFox users

ScribeFire is a blogging tool for FireFox users. Some of the ScribeFire features I like the best:

• Categorize and tag your blog posts
• Post an entry as a draft
• Save works-in-progress as notes
• Use FTP to upload files
• Upload images
• Set timestamps

I used ScribeFire to upload this as a draft post to the blog. Then I checked the code with the Blogger editor. Here's a couple things I learned:

• ScribeFire surrounds all the text you add in ScribeFire with a DIV element and a link to the W3C Validator. OK, but a bit much and not something I needed to add. So I deleted the DIV and associated link.
• ScribeFire uses no paragraph elements. Though that's the Blogger default too, I much prefer to use code for paragraphs and to use CSS as desired for the P element.
• ScribeFire left extra spaces around a lot of text and did not pull lines together. This can cause problems in Blogger and needed code cleanup.

In short, the tool is quite handy, but you may want to do some code cleanup before posting to your blog. I'll use this due to its ease of use but will publish only as a draft. I'll do code cleanup in Blogger. That's annoying for such a potentially great tool.

Check your web in varied browsers

OK, so you're an avid [Firefox or Internet Explorer or Opera or Safari] browser fan. You checked your web pages and they look fine. In your browser. That's not enough.

You need to know if your web pages look good and don't "break" in other popular browsers. Some services are free, some are paid. Check browsers such as:

• Firefox 2.0
• Internet Explorer 6
• Internet Explorer 7
• Opera (varied versions)
• Safari (a couple of versions). iPhones use Safari, by the way.

Not only that, you need to check different operating systems, because some browser versions can and do differ on different OSs. Consider:

• Mac OSX
• Linux (which has a lot of flavors
• Windows

You can pay one-time or monthly fees to use a commercial service that checks a web page against varied browsers or you can go the free route.

Browsershots is a free online service I like. It uses computers of volunteers around the world to make snapshots of a web page in browser versions you select. After a wait (you can hang on or just return to that web page), you get a collection of thumbnail images. Click on one and get a larger view.

It's very easy to see if everything looks OK or if there's a problem with that browser displaying your web page as you intended. The image below represents about 35 minutes worth of waiting -- a price of the price.

As you can see from the image, one snapshot appears at only half-screen vertically. That's because the volunteer forgot to maximize the browser. When you run into that, this service even has an instant "problem" report for each browser snapshot.

Criteria for a new web host

Our church is looking at web hosting options. One criterion is to let an average person maintain the web. A second key criterion is to be able to "touch the code" if we have a person capable of doing that.

Below is the long list of criteria we're using to compare web hosting solutions and site builder type options:

• Offers a Content Management System (CMS) and templates suitable for our church's use. The CMS should let nearly everyone (with minimal orientation) add, edit, or delete text, add or delete images, create or delete pages, and upload files.Templates must be pure CSS -- no use of tables for layout.
• XHTML templates are preferred, though XML is OK as long as layout and CSS can be directly edited. (I'm resisting having to devote enough time to learn XML coding for very little benefit -- I won't use it at work, for example.)
  
• Ability to directly edit the code as well as use the CMS.
• Must allow addition of alternate text and/or titles to image code (for accessibility).
• Ability to upload files via FTP or via Web.
• Absolutely no ads or forced frames with hosting company info showing.
• Templates must allow inserting of multiple-level CSS fly-out menus -- horizontal or vertical or both. Single-level menus are not good enough, if we're going to improve the navigation, which we intend to do.
• The web hosting company must be an established one.
• 24 x 7 support. Email is OK, though phone is better.
• Hosting firm has good ratings (when I can find them).
• A very high percentage web server uptime.
• Offers hosting on Windows 2003 server (in order to keep our options open).
• The hosting package includes room for our web to grow (pages/disk space)
• Offers at least 30 email addresses, auto-forwarding, POP access, and Spam filtering.
• Hosting solution is $300 or less per year. (E-Zekiel is way out of our price range for the size web we have.)
• Domain name registration/renewal is inexpensive (these should be very low cost these days).

Optional, but desired features:

• Ability to upload and offer podcasts of sermons
• Ability to embed video (YouTube or similar)
• Ability to display RSS feeds on selected pages (like Blogger's new XML template system allows).

My Maps a great new resource

Google has done it again! The Google Maps home page now offers "My Maps". This tool lets you add several map points, lines, shapes, balloon text, pictures, and more.

Prior to this new feature, I had tested MultiPlottr, which is a similar tool and does use Google Maps. Google's My Maps appears slicker and offers the familiar ease of use and easy to learn GUI we've come to expect from Google. With Google My Maps you have to guess at location by dragging a plot marker. Try both and see if you agree.

Side note: There is a limit of 50 plotted addesses per map at present.

Ideas for possible uses

• Plot the street addresses of your church members. A visual look at clustering and dispersion may give you added insight for outreach or visitation planning.
• Plot members' addresses, but use different colors for:
• Members who have moved out of the area but still attend.
• New members within the last year.
• Founding members (if the church is new).
• Members who have not moved out of the area.
• Your church's street address (the key reference point on the map).
• Location of selected community resources (City Hall, Courthouse, City or County agencies that help people, Clothes closets, etc.). This might become the basis for a "Where to get help" portal page for your community.
• Home address of visitors in the past year.
• Plot the location of an event away from the church. The Church Art Online Plus Calendar does this, but that is a paid subscription. You could email this map link to all church members and any visitors that gave you their email address.
• Plot any type of demographic information about your members that is related to their address. Just remember the 50-address per map current limit.

Special note about long links. Remember that if you email map links, you should check the length and potential for problems at the receiving end. If the link is a long one or contains special characters, the recipient's email messages may "break" the link, especially when it wraps lines.

A way to avoid that problem is to use the free "TinyURL" online service to create a special short link when the target is a long one. TinyURL creates a special very short link that points to the long one you provide. An example long link reduced by TinyURL: http://tinyurl.com/ywzpx8 .

TinyURL also offers a "preview" feature that lets people see the actual destination link before they decide to select it. Here's an example of the same link as a "preview" one: http://tinyurl.com/preview.php?num=ywzpx8

Hone your keywords

You can find out what words are getting associated with any keywords you specify by using Google's Keyword Tool.

Although designed for use with Google AdWords, the handy online Keyword Tool can help you tweak the ones you are using or considering.

Other free keyword-related tools:

• Keyword suggestion tool (1)
• Keyword suggestion tool (2)
• GoogleDuel - compare which of two related words is more popular
• Ontology Finder - get a list of related words. Use the synonyms in your page's text to boost search results.
• Keyword Density tool
• Keyword Cloud
• Keyword Optimizer - Deletes duplicate keywords in the list and alphabetizes the list.
• Add Keyword Typos - lists possible misspellings you may want to add in your Keywords list.

Microsoft, Yahoo! adopt Google sitemaps

Both Microsoft and Yahoo! have announced support of Google's sitemaps instead of developing an alternative method. Sitemaps help webcrawlers crawl your site better, thus improving search results.

As part of this agreement, the three parties are co-sponsoring a new web site, Sitemaps.org, which has details about the new sitemaps process. The new method uses XML tags, by the way.

Google will support existing sitemaps, their posting at the Google Webmaster Central blog says.

Could your web site use Catfish?

Catfish. n., A horizontal area at the bottom of a web page that overlays the normal page content until closed by the user. It's a "bottom-dweller", hence the name coined by Sitepoint, which started this technique a while back.

Matt Oakes has improved on it using a JQuery plugin. Check out both Catfish and JQuery to see if you might be able to make use of them.

Although Catfish was originally designed for ads, I see possible use as a cool and unusual "announcement" method.

• Catfish - Part 1 (Sitepoint)
• Catfish - Part 1
• JQuery
• JQuery implementation of Catfish
• SitePoint blogs

Adding a blog header background image

The FreeWebPageHeaders site only offers many free 800x200 pixel images for use as DIV backgrounds. The site also has a tutorial on how to add such background images to a DIV. The technique uses CSS.

Open source web page designs

The folks at Open Source Web Design offer free Web page designs. A spot-check shows that OSWD uses modern CSS coding, not layout tables.

You could use these as the basic for regular or blog-type web pages. So download, tweak, and enjoy.

Another source is the free CSS/HTML templates at Mollio. The six basic designs cover most of the common column types and all use CSS, not layout tables. Mollio offers these under three different licenses: Creative Commons, GPL and CPL.

Translate your web

Do you have congregation members or anyone in your Web site's "target audience" that prefer a language other than English? If so, offer them a way to translate your web page.

Google offers a Language Tools page that "translates" from one language to another. Just type in the web address of the page you want translated, and ... presto. Test it out by translating the Avondale Pattillo UMC home page from English to Spanish.

Use Google Sitemaps for better SEO

Google Sitemaps can help raise your ranking in Google search results. Google says, "By using Sitemaps to inform and direct our crawlers, we hope to expand our coverage of the web and speed up the discovery and addition of pages to our index."

Mary Gillen, author at Learn One Thing, has tips on using the site maps:

• Google Sitemap Tips - Part 1
• Google Sitemap Tips - Part 2

Also check out "About Google Sitemaps" and " Inside Google Sitemaps" at the Google site.

Using images for bullets

Would you like to have bulleted lists with fancier bullets? Have you tried using an image as a bullet and hated the result? Buddy, have I got a deal for you.

The MaxDesign site has a LisTutorial specifically for this. The step-by-step details are easy to understand and the code is short. Try it; you'll like it.

Avoid in-page links

Usability expert Jacob Nielsen says to avoid same-page links. Why? Almost all links work one way, so users expect the following:

• Clicking a link navigates you to a new place.
• After you click, the old page goes away.
• A new page loads into the window, replacing the old page.
• You first see the top of the new page.
• The Back button returns you to the old page.

Useit.com has a page of links to current issues in Web Usability

De-hack your code

While most church web developers won't want to get into the code this deep, everyone needs to know that when the new Internet Explorer 7 arrives, it will "break" some old techniques that coders used to force IE 6 to "behave". Some that code will need to be edited.
How widespread is this? Even some blog templates use the IE6 "hacks".

The Sitepoint blog has a posting on this, " Microsoft Says: De-hack your CSS". It gives code samples that won't work in IE7.

After IE 7 arrives, you may want to keep an eye on any site that produces web page "templates" you have used -- many will update their code. You can also email them and ask how they plan to handle the transition.

"Skip to content" link code

You can improve accessibility to a web page by adding a "Skip to content" link that jumps past the header and any navigation area on your web page and goes straight to the text ("meat") of the information on the page. But you don't necessarily want sighted people seeing a link they might not use. What to do?

One solution is to add a special class that hides the text. Example:

.skip2content {display: none}

This lets screen readers for the visually handicapped hear the link and use it but hides it form the display for a sighted person.

• How to add "Skip to content" in a Classic Blogger Blog

Are there any situations where you'd want to display that link? Perhaps. Consider a person with a motor handicap -- they can see just fine, but it takes them much longer to move a mouse or other pointing device around. They may well want the ability to Tab to that link and press Enter to jump to the page's text. In such a case, they'd need to be able to see the link.

Validate your web pages!

If you create your own web pages, you should validate them to make sure the code is correct for the web "document type" (DOCTYPE) you have specified. If you don't specify a DOCTYPE, one gets assigned by default.

Online tools let you check:

• The HTML code
• The CSS (Cascading Style Sheet) code
• Accessibility by the handicapped

If you buy a web design creation service instead of creating your own, it's still a good idea to see if the firms' code passes these checks. Validators usually refer you to a specific line in the code so you can locate and fix problems.

Below are a few links to get you started. You might also want to read, "Should you validate your web page?"

HTML validators

• HTML and XHTML Validator by the World Wide Web Consortium (W3C)
• CSE HTML Validator Lite
• W3C Link Checker - checks for bad links
• HTML, XHTML, WML, XML validator
  

CSS Validators

• W3C CSS Validator
• WDG CSS Check
  

Accessibility checkers

• AccMonitor online
• HiSoft Cynthia Says
• WebAIM's WAVE
• WebXACT
• Accessibility Valet
• LIFT Online - 5-pages evaluated free
  

Why adopt accessibility guidelines?

Web developer Andy Hagans found that a high degree of web page accessibility greatly improves Search Engine Optimization (SEO)." Do you want better search engine ranking? Make your web pages more accessible.

Andy had this "Road to Damascas" moment after editing his website to comply with most W3C Web Content Accessibility Guidelines.

• Read Andy's full article

Code stylin' tips

• LinkTips blog (links to CSS, color, ...)
• Flow text around image using CSS
• Sample revised blog CSS
• Fluid CSS with extra info in footer ... "Arkanoid" design of SimpleBits
• Dave Shea's CSS Crib Sheet at MezzoBlue has great pointers -- guidelines for web developers.
• CSS crib sheets - Andy Bludd
• CSS-Discuss Wiki has been gathering great tips since 2002. Chek it oiut for tips and explanations.
• CSS Formatter and Optimiser. Based on the free csstidy app, this online code optimizer works well. You get options and code layout choices.

CSS tips from NetMechanic

The NetMechanic site is a great one with tons of tips. If you want to learn more about Cascading Style Sheets or just troubleshoot a current challenge, you can find a lot of information in the "CSS Tip" pages.

Check out the latest Usability, HTML, and CSS Tips at the newsletter index.

General principles for church web sites

• Each hour of planning saves 12 hours of changes later.
• Web site visitors mostly "scan" pages
. They don't really "read" all the nice text web designers and content people put there. So plan on it and design based around that.
• Less is more. That goes for design as well as content. A big block of text is visually discouraging. Tons of clip art or small photos is distracting and gives pages a "circusy" look -- not exactly what your church has in mind, I'm sure.
• Use Cascading Style Sheets, which will make site-wide changes much easier and faster to accomplish.
• Aim for a strict HTML 4.01 code. If you can't get there, make as much meet the strict standard as possible. That will save time later, when recoding might be required due to web browsers becoming more standards-oriented.
• Start small in both scope and content. Let the site grow naturally. If your site seems to have a ton of information but not a great organization, consider cutting back content as you think through site organization.Don't post what you can't maintain. There's nothing worse than an obviously outdated site to give your web site visitors a negative impression.
• The only thing constant is change. Go with the flow; expect changes. The web you have in one year should not resemble what it looks like now unless nobody is maintaining it. Every few years, plan on a change in "looks" and features.