Movable Type Design/Tech

Tips and tricks to using the Movable Type blogging and Content Management System.

Metropolis - Philadelphia News and Journalism

Metropolis is a "news, analysis and commentary" site from veteran Philadelphia reporter Tom Ferrick (Wikipedia). An alum of The Philadelphia Inquirer, Tom's spent the last half-dozen years talking to everyone who will listen about the future of print and Philly news. He's done talking and is showing what can be done on a budget budget. From "This is Metropolis," the lead article:

Local newspapers, TV and radio stations are retreating from in-depth coverage of regional news either due to economic or audience considerations.

The retreat has been gradual, but no one expects it to stop. The company that owns the region's largest newspapers - the Inquirer and Daily News - is in bankruptcy. The size of the editorial staffs at the papers continues to shrink. The prognosis for metro dailies here and elsewhere is not good. The journalism practiced by these papers is still robust, but the economic model that has sustained it is eroding. If these traditional sources of news falter or fail what will take their place?

The site was built in Movable Type. The most prominent feature is the slideshow display of featured articles. Tom has seen a similar effect on another journalism site and a search found the "Sliding Horizontal Banner Rotator" at Active Den, a great site to purchase pre-built Flash files. Movable Type entries are outfitted with custom fields to enter images and links. Movable Type then creates a custom XML file for the "Main Stories" feed, which is then picked up and displayed by the Flash banner. In addition, the site uses Google Adsense to provide income.

Visit: Philadelphia Metropolis

Elisabeth Olver ArtistElisabeth is a painter and artist who specializes in original acrylic paintings and giclee prints of nature and South Jersey beach scenes. Her existing site was attractive, but it didn't have online ordering and she wasn't able to update it herself.

We put together a features list and then went through a round of concept screenshots which I built in Adobe Fireworks and Photoshop (you can see our work here!). Design in hand, I built a customized Movable Type site. A specialized template allows her to enter information about the each piece: medium, theme, price and the URL to it's image (most of which are hosted on Flickr). Movable Type pulls these together into various category and individual art pages, with automatically-generated Paypal "Buy" buttons for available pieces. We stressed search-engine visibility so there are many categories and they all cross-link with each painting.

Visit: Elisabeth Olver
Cornerstone FellowshipCornerstone is a relatively new church plant in Smithville, Atlantic County, New Jersey. They're site is a simple design built in Movable Type using off-the-shelf templates to keep the budget down. The most exciting part of the site is the podcast sermons and the ability to ask Bible questions and make prayer requests from the homepage. I'm most happy to see the church using the site and updating it regularly!

Pastor Fred Schwenger also has a new local connection: he and a partner have just opened Superior Automotive here in Hammonton at 880 S White Horse Pike! 

Visit: CornerstoneFellowshipOnline.com
Talk to the FutureThese 'public conversations with today's boldest voices' are the brainchild of San Francisco, California-based activist journalist Anne-christine d'Adesky. She's traveling the world interviewing policy makers and on-the-ground organizers on issues of global health and AIDS. The site uses Google Video and Movable Type to create an online video magazine.

Visit: Talktothefuture.org and Acdadesky.org
A site put together by two consultants to the natural food industry. All pages were editable by a Movable Type powered content management system. A notable feature was a e-commerce subscription function with private log-in pages. This consultancy business was closed in May 2008 and the site was taken down.
Save St Mary's MalagaOn a Friday my wife Julie and older son attended a rally to save a favorite church in Malaga, Gloucester County, New Jersey threatened with closure by the Diocese of Camden. By Sunday we launched Savestmarys.net. It was a weekend where I was already swamped with deadlines, so it's standard Movable Type but with all the tricks of mashed-up Web 2.0 sites to let Julie pour content in: Flickr, Youtube and Google Calendars.

For two years we also had a companion Ning-based social network for churches through the Diocese.

Visit: Savestmarys.net
AmyOutlaw.orgThis is a fairly standard Movable Type blog for a Friend (Quaker) based in the West-Philly neighborhood of Philadelphia, PA. The most unusual element is that the client wanted two separate blogs: one meant for daily posts and the other for more weekly posts (it's all set up in MT via categories). This also shows the use of Slidoo for a photo banner head. The pictures are all pulled from a particular set of her Flickr account. Visit site.
Nick Watts is a piano instructor in the Oaklyn/Collingswood area of Camden County, South Jersey and wanted to advertise his services online. Be sure to check out the Entertainment page for music samples. I used Box.net to allow Nick to upload his own songs any times he wants!

Visit Site: Nick Watts Piano.

I'm working on an international site built in Movable Type and including statements in multiple languages, including "Right to Left" languages like Arabic and Hebrew.

I was pleasantly surprised when I cut-and-pasted an Arabic text from MS Word into Movable Type and found the letters looking good both in the MT entry box and the resultant post. I didn't realize just how powerful UTF-8 encoding is and how well MT supports it throughout the system. Still, the output wasn't correct, as it wasn't displayed in right-to-left fashion. I needed to figure out the CSS for this kind of output and an easy way to allow the client to set this without forcing them into coding.

Using the highly-recommended Rightfields Plugin I added a checkbox field for posts that should be displayed in RTL. Here's a screenshot:

RightFields has an IF function that we can use to set a new DIV with our RTL style. Here's the coding in the MT template, stuck in just after the "entry-body" div:

<MTExtraFields>
<MTIfExtraField field="RTL">
<div class="rtl-display">
</MTIfExtraField>

Note: you'll also have to add similar code to close the div at the end of the passage.

Finally, as best as I can determine, this is the proper CSS designation for RTF display (Microsoft has a good webpage on this). It works in Firefox, IE7 and IE6.

.rtl-display p {direction:rtl;text-align:justified;text-align:justify;}

I'd be happy to get any feedback or corrections to this. I'm a typical 'Merican whose foreign language skills don't go far past a dozen phrases lifted from Sesame Street and long-ago French classes. Arabic and Hebrew typesetting are quite unfamiliar terrain.

An early description of my using the Movable Type blogging platform as a content management system (CMS) for an entire website. I've used these techniques to build websites which clients can easily manipulate and update.

Inspired by Doing Your Whole Site with MT on Brad Choate's site, I started experimenting today with putting the whole Nonviolence.org site into Movable Type. At first I thought it was just a trial experiment but I'm hooked. I especially love how much cleaner the entry for the links page now looks and I might actually be inspired to keep it up to date more now. (I've also integrated Choate's MT-Textile which makes a big difference in keeping entries clean of HMTL garbage, and the semi-related SmartyPants which makes the site more typographically elegant with easy M-dashes and curly quotes).

So here's what I'm doing: there are three Movable Type blogs interacting with one another (not including this personal blog):

  • One is the more-or-less standard one that is powering the main homepage blog of Nonviolence.org.
  • The second I call "NV:Static" which holds my static pages, much as Brad outlines. I put my desired URL path into the Title field (i.e., "info/index") and then put the page's real title into the Keywords field (i.e., "About Nonviolence.org") and have that give the data for the title field and the first headline of the page. It might seem backwards to use Title for URL and then use Keywords for Title, but this means that when I'm in MT looking to edit a particular file, it will be the URL paths that are listed.
  • The third blog is my "NV:Design Elements." This contains the block of graphics on the top and left of every page. I know I'll have to redesign this all soon and I can do it from wherever. This blog outputs to HTML. All the other pages on the site are PHP and its a simple include to pull the top and left bars into each PHP page.

Oh yes, I'm also thinking of incorporating guest blogs in the near future and all of these elements should make that much easier.

Here's another site to check out, about how someone integrated Movable Type into their church website using some interesting techniques.

Search

As Seen In

EBook

Shortcut cover
Web 2.0 Mash-Ups & Niche Aggregators (O'Reilly Media, 2008, $9.95): Order here.

Social Networks

Other Sites

Archives