Designing Web Sites for Organizations

Monday, January 8th, 2007 at 7:39 AM | Category: Blogging, Meryl's Notes Blog, Tech No comments

I’m the lucky webmaster for three PTA web sites and spent much of the weekend converting one to Movable Type (MT) and starting a new one for Cub Scouts. Thankfully, a friend of mine stepped up to take care of the webmaster role for the latter site, but I told her she would have an easier time managing it using a blogging tool like MT.

So I spent the weekend drafting a site so the committee could discuss the new design at its meeting yesterday. These organizations consist of volunteers, so to ensure an effective web site — I follow two rules:

1. Easy to update.

2. Easy to use.

Since my friend and I make up the audience for these web sites, we ask each other questions when trying them out. Once the design is ready, we ask other friends in the organization to look at the site to see how easy (or not) they are to use.

My experience with these organizations is we don’t know what we want the design to look like, but we know what information needs to appear on the site. So that gives us free reign (not that I like that). These sites don’t have many graphics since we rely on free templates to build them. None of us has the time to design something from scratch to use with the blogging tool.

I gave my friend a choice of Blogger or Movable Type (while WordPress does great work, I find it too difficult for those not familiar with blogging or coding). This provided a good opportunity to see what others — who have never used a blogging tool — find easier to use. Although Blogger was easy, it offered little in terms of control and templates. That’s OK for a lot of people, just not for our needs. She chose MT. Here’s the formula for creating a usable, easy to maintain web site for organizations and personal use:

* Selected a free template from The Style Archive that best matched our needs.

* Installed and tweaked the template and its graphics files.

* Added Google Calendar‘s code so the calendar appears within the blog.

* Signed up for a BubbleShare account for photo albums since BubbleShare lets you display an album within the blog without going to the site (Google’s only works with Blogger and Yahoo! doesn’t let you put the album within an entry).

Typically, it takes no more than a day to follow these steps to create a full web site. However, the original design I picked for one site had messy CSS and was more trouble than it was worth. Besides, I didn’t like what I did with the header. When I switched to another design, it went much better.

Some complained the sites needed more graphics and point to another local school’s PTA web site. When I checked out the web site, I couldn’t find anything without a lot of hunting plus the design was inconsistent. From what I could tell, the site wasn’t easy to update. As volunteers, we don’t have as much time as we’d like to update the site, so the last thing we need is infrequent updates. The site is pointless as parents won’t be motivated to check the site regularly. Thus, those two rules guided the design process. Besides — it would be impossible to please everyone.

I’d love to share the sites so you could see they don’t look identical to their original templates, but the images would be full of “blacked out” content to keep the organizations under wraps and pointless to share.

Tags: , ,

Teach Yourself Movable Type in 24 Hours

Monday, May 31st, 2004 at 6:11 PM | Category: Books, Meryl's Notes Blog, Reviews, Tech No comments

TeachMT Teach Yourself Movable Type in 24 Hours

Blogging tools can be used for more than just blogging or keeping an online journal / diary. People use them to manage their sites because they’re less complex than the full-fledged Content Management Systems (CMS). Plus, they’re cheaper and the people using these tools are using them for their personal or small business sites.

Movable Type (MT) is a blogging tool that I’ve been using on my site for several years. This is not a review of which software is the best, but on the book’s usefulness in getting a person up to speed on MT. On that note, the authors do a first-rate job of helping the reader learn how to use MT.

As a person who is experienced in using MT, it provides me with a few tips and tricks I hadn’t considered. Since I’m self-taught, I missed a few steps. Besides, there are many things you can do with MT especially when adding plug-ins.

For the person who has never touched a blog or MT in particular, the authors start at the beginning and keep things simple. Realistically, how do you write a book that meets the needs of the experienced while introducing the new users to the software? Experienced users will probably skip the first few chapters where it covers installation and setting up a blog. But the rest covering templates, plug-ins, managing archives, and adding features will more than provide enough to keep anyone busy.

Not only do the authors show how to use MT, but also they offer information on how to write and promote content. The book focuses on v2.x of MT. As I understand it, MT v3.0 doesn’t have major changes and much (if not all) of the book is still valuable. You could wait around for a v3.x book, but by the time it comes out the software will have upgraded. Blogging tools upgrade very frequently and I use seldom use the word “very.”

The MT online doc is one of the better blogging software documentation I’ve seen. The book offers accompanying pictures and additional information not found in the help doc. If you like getting all of your information in one place accompanied with visual aids, this is sure to please.

VITAL STATISTICS:
TITLE: Teach Yourself Movable Type in 24 Hours
AUTHOR: Molly Holzschlag and Porter Glendinning
PUBLISHER: Sams
PUBLICATION DATE: May 2004
ISBN: 067232590X
FORMAT: Paperback
PAGES: 448
PRICE: US$29.99

Tags: , ,

eNewsletters and RSS

Tuesday, September 2nd, 2003 at 6:34 PM | Category: Blogging, Meryl's Notes Blog, Tech No comments

Head Gnomie, Chris Pirillo, has been encouraging Lockergnome readers to drop the email newsletter and instead subscribe through RSS because many of the enewsetters were bouncing into the spam box or not even reaching subscribers because of the ISP preventing them from reaching their inboxes.

Steve Outing has written more on the topic in With E-mail Dying, RSS Offers Alternative as well as InternetNews.

I’ve been familiar with RSS ever since I played with Dave Winer’s Radio UserLand back in late 2001. Thanks to him, I learned about RSS and its power. I believe he started the news aggregator wave. I used Radio for about a year and liked its aggregator. The only reason I stopped using it is because I couldn’t use all of its powerful features and pay full price since I already established my blog with Movable Type and prefer it for blogging purposes.

Anyway, RSS is a great tool and it has a big and bright future ahead. But, does it replace eNewsletters? Not right now. Though, I’m using Feeddemon from the ever-talented Nick Bradbury and feeding it a ton of XML, RSS, and RDF links… I only check it a few times a week… and that’s only for a few resources out of the over hundreds in it. But, when I get a subscribed enewsletter in my emailbox, I read it every time. In other words, I can be as lazy as I wanna be and it’ll come to me. If I have to go to Feeddemon or another news reader, I might not ever see it because I am too busy and getting sidetracked by other things. Plus, there are so many news feeds, it is impossible to scan them all.

Putting on Freud cap, “And so what do you think?”

Tags: ,

Making the Move to Movable Type

Monday, February 4th, 2002 at 10:08 AM | Category: Blogging, Meryl's Notes Blog, Tech No comments

What’s the big deal with Movable Type (MT)? Why are so many people moving their weblogs to MT? What is it like? Should I use it?

There’s no question that weblogs are getting more popular as are the applications that manage them. The applications can be used to create static sites.

In the old days (like way back in 2000), most weblogs used Blogger or just plain ol’ Web design programming. Today, we have numerous apps from which to choose and many of them low-cost or free. One entry into the weblog phenomenon is Movable Type, which has grabbed a large number of fans in a short time.

Weblog Features

Before we delve into the intricacies of MT, let’s look at the some of the features available in weblog apps:

  • Comments – Gives readers the opportunity to respond to a weblog entry.
  • PermaLink – Gives entry its own permanent link for later re-reading or referencing.
  • Archive – Saving older entries in an organized manner for re-reading or referencing.
  • Calendar – Click the calendar to see entries for the selected date.
  • Remote (bookmarklet) posting – Enable webloggers to post to weblog without going into the app.
  • Other authors – Ability to invite others to post into a team weblog.
  • Multiple weblogs – Add and manage multiple weblogs within one app without signing for additional accounts.
  • Templates – Gives a variety of design choices to webloggers who don’t wish to design their own.
  • Hosted server – Ability to manage a weblog on a hosted server tied in with the app.
  • Own server – Ability to run a weblog from your own local harddrive and/or web server.
  • Editing – Includes variety of features such as spellchecking, bold, italic, and adding URLs.
  • Categories – Associate entries with a category or multiple categories.

This is not even a complete list of all the features available. MT has all of these features available except for the hosted server since it allows you to install it on your own server. If you don’t have one, there are many Web sites that offer free hosting with ads.

In conjunction to notifying weblogs.com, MT has its own list of updated weblogs. This helps new weblogs gain publicity in multiple locations.

MT also has an email notification system. If you want to offer email notification to your fans, they supply the email and get automatically added to the notification list for the specific weblog. Usually notification comes to an emailbox, but this one goes straight to MT’s application.

There are occasions when I want to write an entry, but not release it. MT gives you the ability to HOLD, RELEASE, or date an entry. This can be helpful to multiple authored weblogs. It makes it possible for the team to create its own process for going live with a new entry.

Installing MT and a Little Handholding

The instructions are clearly written that following them ensures a successful install. Those who are familiar with CGI (common gateway interface), CHMOD (changing permissions), and FTP (file transfer protocol) find the steps easy to implement. Plus, the interface‘s simplicity eases the learning curve.

Anyone who has not used FTP may find the installation challenging, but if they’re willing to learn, they can seek help from the Movable Type support forums. Ben and Mena Trott, the developers behind MT, are amazingly responsive to the numerous questions posted on the boards. Plus, many users help each other.

I attempted to install MT on a free server account since that has better CGI support and I didn’t want to make a bigger mess of the meryl.net backend. After following the instructions, I tested it and got an error message, not a 404, 500 or anything of the sort. I went back and re-read the instructions and began to kick myself for overlooking an important element: the requirements . The free server is using PERL 5.003, not the required PERL 5.004 (Lesson #1: make sure you have the required tools before proceeding).

I went to my host provider to find out if they had a valid version of PERL as well as the two required modules. Searching the support database, I found PERL 5.003 in the loaded modules list and became more discouraged. With nothing to lose, I dropped a line to tech support to ask them and forgot about MT for the rest of the afternoon.

Tech support responded indicating the server has PERL 5.6 loaded! Yahoo! That motivated me to try again. Repeat – follow instructions, verify one of the two required modules is not loaded on the server. No problem… downloaded, unzipped, and uploaded the file to the server without fail. Proceeding with the rest of the instructions, everything went perfecto!

Too clean. I feared my troubles were waiting for me when I imported existing entries from the previous weblog. I saved the rest of the work for another day.

Frightening Part for Long-time Bloggers

The scariest part of the whole process is importing entries from another weblog application into MT. MT provides separate instructions for importing from other applications. As an extra precaution, I copied my current template and saved it on my computer as well as copying the archives and other data files.

To make it scarier, I used the <p class="title"> on recent entries to make the title of the entries stick out so readers could immediately know what it is about. MT gives you an option of letting it know whether or not you have titles in your entries. The answer is, obviously, "yes and no." I swallowed hard and hit "Import."

All 300 entries import into MT flawlessly. Whew. Do dance of joy.

Thinking the worst was over, I hit REBUILD and ran into a roadblock, hard. 500 – Internal Server Error. After researching the MT forum and talking with Christine, we figured out that the imported entries were too big for my server to handle. She came up with a workaround and ta-da! Everything was in. I copied my old templates into MT and everything worked like a charm. I tweaked a few things here and there as I got more familiar with MT entry screen, editing menu, and other screens and features.

Image Pop-Ups

A feature I’ve never seen in any other weblog is the image pop-up template. At first, it was tough to figure out how to use it because I FTP images to my server. The image pop-up feature didn’t show up until I used MT to upload an image for me, then it would either give me the HTML code to put in the entry or create a new entry with the code itself.

It also helps you embed an image within an entry, so when people read the entry, they will see the image right there. The popup provides a link on text that has to be clicked to view the image. Click image pop-up template to see how the popup works.

The code makes a link to the image so it pops up in a box with the dimensions of the picture instead of linking to an image and having huge whitespace all around it that when you close it, you’re also closing the weblog site, but the whitespace example opens a new box since I added markup to make it happen.

“Why Did You Move?”

Several people have asked me why I switched. That’s easy:

  • manage the stuff on my own server rather than a less reliable shared server
  • responsive and interactive tech support and community forum
  • rich and useful features
  • stays updated with latest advances in weblog applications
  • strong supporting documentation
  • ability to syndicate
  • bookmarklets for posting to MT from any Web site and it’ll add the web site’s link
  • remote sign-in and posting without requiring another PC to be up and running
  • ability to use it as a static site (articles) and as a weblog.

Ben Trott and Mena Trott have put together a powerful, user-friendly application while being responsive in the tech support forums.

Does this mean I think MT is the best? You’ll have to put up with a gray area answer. I don’t think any single application is the best for weblogging and personal Web publishing (this and most weblog applications are not Content Management Systems, but that’s another story).

It’s all about the features you want and need. I think the beginners will be overwhelmed with this application unless they’re patient enough to rely on the forums for help and learn the FTP process and dealing with CGI files. Intermediate and advanced users can take off with this application and take it places.

Tags:

PDA Your Movable Type Blog

Saturday, January 19th, 2002 at 9:10 AM | Category: Meryl's Notes Blog, Tech 3 comments

If you run a weblog using Movable Type, then you can easily make it available for PDA readers. It takes under 30 minutes to set it up.

Select the weblog to convert to PDA format. Click on LIST & EDIT TEMPLATES > CREATE NEW INDEX TEMPLATE (just above the gray boxed area that lists your existing templates) .

In the NAME box, enter a name for the weblog. Mine says, “Portable meryl’s notes.”

In the OUTPUT FILE box, enter a name for the file with a .html extension. Here I enter, “pdanotes.html.”

Copy and paste the following and change the <TITLE> and the <DIV> right after the <BODY> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<TITLE>meryl's notes on the go!</TITLE>
<style type="text/css">
<!--
body {
	color:#333;
	background-color:white;
	margin:20px;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	leftMargin=0
}
h1 {
	font:bold 12px/12px verdana, arial, helvetica,
                       sans-serif;
	margin:0px 0px 0px 0px;
	padding:0px;
}
p {
	font:11px verdana, arial, helvetica, sans-serif;
	color:#333333;
	margin:0px 0px 0px 0px;
	padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.tinyfont { font:8px verdana, arial, helvetica, sans-serif; }
.smallfont { font:9px verdana, arial, helvetica, sans-serif; }
.titlefont { font:14px verdana, arial, helvetica, sans-serif; }
a {
	color:#000000;
	font-family:verdana, arial, helvetica, sans-serif;
	text-decoration:none;
}
A:link { color: #09c; TEXT-DECORATION: none }
A:visited { color: #07a; TEXT-DECORATION: none }
A:active { TEXT-DECORATION: none }
A:hover {
	FONT-WEIGHT: normal; FONT-STYLE: normal
	BACKGROUND: #eee;
}
#Header {
	margin:50px 0px 10px 0px;
	padding:17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] +
[top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color:black;
	border-width:1px 0px; /* top and bottom borders: 1px;
left and right borders: 0px */
	line-height:11px;
	background-color:#eee;
/* Here is the ugly brilliant hack that protects IE5/Win
from its own stupidity. Thanks to Tantek Celik for the
hack and to Eric Costello for publicizing it. IE5/Win
incorrectly parses the ""}"" value, prematurely
closing the style declaration. The incorrect IE5/Win
value is above, while  the correct value is below. See
http://glish.com/css/hacks.asp for details. */
	voice-family: ""}"";
	voice-family:inherit;
	height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule.
Basically, it feeds correct length values to user agents
that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2
parent-child selector. ALWAYS include a "be nice to
Opera 5" rule every time you use the Tantek Celik
hack (above). */
body>#Header {height:14px;}
.Content {
	margin:5px 5px 5px 5px;
	padding:2px;
}
.dateheader {
	position:relative;
	width:auto;
	min-width:120px;
	margin:0px 0px 0px 0px;
	padding:5px;
	z-index:3;
}
-->
</style>
</HEAD>
<BODY>
<DIV id=Header>... meryl's notes on the go!</DIV>
<div align="left">
<MTEntries lastn="15">
<MTDateHeader>
<div class="dateheader"><H1><$MTEntryDate format="%A, %B %e,
%Y"$></H1></DIV>
</MTDateHeader>
<br>
<DIV class="content">
<span class="titlefont"><i><$MTEntryTitle$></i>
(<$MTEntryDate format="%I:%M%p"$>)<br /></span>
<$MTEntryBody$>
<MTEntryIfExtended>
<p><$MTEntryMore$></p>
</MTEntryIfExtended>
<MTEntryIfAllowComments>
<p>:: Comments left behind ::</p>
<MTComments>
<$MTCommentBody$>
<span class="smallfont">:: <$MTCommentAuthorLink$>
<$MTCommentDate$></span><br /><br />
</MTComments>
</MTEntryIfAllowComments>
</div>
</MTEntries>
</div>
<HR width="75%">
<P CLASS="tinyfont" align="center">
<a href="http://www.movabletype.org">Powered by
MovableType</a></P>
</body>
</html>

Hit SAVE and do a REBUILD.

That’s it for the Movable Type portion. Next step is to go to AvantGo and log in.

Click on MY ACCOUNT (upper right side of the screen) > CREATE CUSTOM CHANNEL WIZARD > in CHANNEL LOCATION, enter the URL to your new .html file that you just created. For this, it is: http://www.meryl.net/blog/pdanotes.html.

Click on VIEW to make sure it takes you to the .html page you created to verify it is the correct URL. Once confirmed, close the window and you’re back at AvantGo.

Proceed through the Channel Wizard. It has instructions for each screen so you can determine what you’d like to do. Remember, PDAs holds various amounts of data depending on the user’s PDA. Some are as small as 2 MB and others have 32 MB.

Click NEXT > Enter a CHANNEL TITLE (meryl.net articles) > Enter the CHANNEL MAX SIZE based on reading the instructions > NEXT > Select YES or NO for FOLLOW OFFSITE LINKS based on instructions > NEXT > Determine CHANNEL LINK DEPTH upon reading instructions > NEXT > Select YES OR NO for INCLUDING IMAGES (I recommend NO) > NEXT > FINISH (or go BACK if you need to revise something).

You’ll return to the MY CHANNELS screen. Select EXPORT CHANNELS. COPY the new channel you just have created by highlighting the entire URL and pressing CTRL-C. PASTE it in an email or word processor by pressing CTRL-V. This is the URL you give to others or put in your Web site for others to access your pages through the PDA.

Consider yourself portablized!

Tags: , , , ,

Subscribe to this here blog: RSS or E-mail


Get Updates