Using Adobe GoLive with Movable Type
Visually edit your weblog's templates
02 June 2006 Ryan J. Bonnell Skip to comments
1 Comment
(
Closed)
In this article, Ryan J. Bonnell will show you how to use Adobe GoLive's additon of Movable Type template tags to visually manage Movable Type's default templates.
In early April 2004 saw the launch of Adobe's flagship product line, the Adobe Creative Suite 2 whereby all their applications in the suite got new features, updates, and plenty of goodies. One such gem in Adobe's announcement was the built-in support of Six Apart's Movable Type and TypePad template tags within GoLive CS2 The two companies have collaborated to build visual tools that let designers create and update Movable Type and TypePad templates from within the GoLive design environment.
This isn't just great new for Movable Type users, this is great news for the community at large, for if Adobe has taken note of Six Apart and their popularity it may lead to future collaboration with other weblog engines such as Wordpress, Textpattern and others.
How does it work?
Adobe GoLive CS2 (numerically version 8.0) now features a special menu of tools that allow designers to insert TypePad and Movable Type tags within GoLive. Using these special tags, designers can bring weblogging capabilities to their site designs, tightly integrating content from a client's Movable Type or TypePad powered site.
Also included are a small collection of ready-made templates for the TypePad publishing service, as well as Movable Type users. Seven different samples are already available for quick customization and easy use on any TypePad or Movable Type service, with possibly more to come.
What this allows for is to give designers the ability to create templates on GoLive CS2 that will support the relevant Movable Type template tags, but also allows the inclusion of template creation straight into the design process — from creating the mockups in Photoshop or Illustrator, to coding the template right in GoLive CS2 without the use of a text-editor. Thus, making it entirely easier to edit Movable Type templates in a WYSIWYG editor.
A trip down memory lane
In order to fully understand how the Web has evolved and why we would be using a visual editor like Adobe GoLive to manage a database-driven Movable Type powered site, we must take a quick jaunt back in the Internet's early history.
Long-time web designers and developers will fondly remember the days when the only way to create a Web site was to create the pages by hand, painfully writing line after line of tiresome HTML code. (Note: some will argue that this is still the only way to professional code a commercial Web site, and we agree.) This solution worked well for low-volume, infrequently updated sites, but as the popularity of a site increased so did the amount of pages that need to be updated, and so did the work involved. This created problems for the already overworked webmaster, and the struggle of managing content by hand went on until the webmaster finally reached his breaking point and starting looking into a CMS (Content Management System).
First came hand coding, then came hand-holding
Since then, companies like Macromedia and Adobe (soon to be the same company have since stepped up and developed WYSIWYG (What You See Is What You Get) visual editors such as Dreamweaver and GoLive to write the code for you, giving you a visual environment for designing pages and adding content. This overuse and dependency on not knowing how the visual editor was writing the HTML gave way to the era of "Tag Soup" Web sites (those being sites that had extraneous amounts of unnecessary markup since the visual editor was haphazardly authoring the HTML, which often times looked more like alphabet soup than clean, semantic HTML — hence the "Tag Soup" moniker.)
Dreamweaver and GoLive both offered clever ways to locally manage — and rapidly update — an entire Web site thru the use of site-wide Libraries and Assets, but the inability to use a visual editor to manage a database-driven Web site still existed. CMSs came about to solve a problem of how to manage content, but setting up and administering a CMS was not for the faint at heart. Thus, the visual editors overcame the problems with hand coding and learning HTML, but they hadn't mastered managing static and dynamic content together.
"Weblogs" or "blogs" as they are often called, sprung up to solve this content management problem: they let any level of user — even one without any Internet knowledge — setup a Web site and start publishing content thru a simple web-based interface — no visual editor needed, just a web browser and an FTP client. Updates were now easy and effortless, and with the weblog software managing the content, early pioneers in this medium could finally focus their efforts on content (the whole goal all along). But what if you wanted your site to be different? You had to roll up your sleeves and start massaging the code if you wanted your site to look different than the 10,000 other default weblog-powered sites.
While the ability to manage and update a site's content drastically improved with popular weblog packages such as Movable Type, Wordpress, and Textpattern among others, the ability to tweak the design remains for the technically savvy. Knowledge of any of the tricky, but powerful scripting languages like PHP, ASP, or Coldfusion were necessary to master in order to change the style and location of the posts, archives, comments, and even the XML/RSS/Atom feeds.
So now the problem wasn't "how to best manage your content," but how to update the templates or design of your weblog-powered site. Until know that question hadn't been answered — enter Adobe GoLive with built-in Movable Type template tag support.
Levering a data-driven Web Site with a visual editor
It's no secret that Movable Type powers the MacZealots Web site, but until Adobe GoLive CS2 we were restricted to editing our templates in a code-only environment. We were curious to see what power the promise Adobe and Six Apart were making, and we're here to share our experiences with you.
It's fairly easy using the template tag extensions in GoLive, as inserting an element it just a short trip to the Special > Insert menu.
From within the Insert sub-menu, you can select to insert either a Movable Type or TypePad tag, depending on which type of template you're modifying. What the extensions in GoLive allow you to do:
- Add sets of template tags to your Web pages, which after rebuilding your weblog will output information from Movable Type or TypePad's database.
- Visually design or alter a Movable Type template, with minimal need to know the technical underpinnings of the code.
| The Movable Type menu allows you to insert: | The TypePad menu allows you to insert: |
|---|---|
|
|
When you insert one of the templates tags, GoLive will render the placeholder code with an outlined box, accompanied with a tiny Movable Type wrench logo in the top left corner of the box. Next to the wrench icon is a text label showing the appropriate container tag's name. Nested template tags appear enclosed by their parent container, and for each template tag there is an appropriate wrench icon and text label.
While subtle, these two nice touches on Adobe's part help to signify that the area contained is weblog content instead of the visual elements of the page's design.
If a plain code view is more your style, inserting the template tags is exactly the same no matter how you're editing your page — whether in Layout, Frame or Source views. However, in source (or "code view") template tags don't appear any different than any other HTML elements. Although GoLive does colorize the HTML source code, no special treatment was done to distinguish between the template tags and standard blocks of HTML code.
Working with GoLive
While viewing the template tags in GoLive is quite straight forward, our experiences in inserting and using the tags left a lot to be desired. Many times trying to insert a template tag in a document did absolutely nothing at all, leaving the mouse cursor in its original position giving us no feedback on what just happened. Not knowing whether GoLive inserted the tag we asked it to, doing the exact same command yielded the same incomplete results.
Thinking that we might have been doing something wrong, we tried consulting the GoLive help documentation, but were shocked when we couldn't find any information on using the Movable Type templates! Just for emphasis that last point is worth repeating — when consulting GoLive's built-in help we couldn't find any documentation on using the Movable Type templates in GoLive. We even tried searching the GoLive help for permutations and spellings of Movable Type, but the searches returned no results, seriously:
Without asking either Six Apart or Adobe, it's uncertain who's at fault for this obvious oversight. To think that two companies would forget to include documentation for a feature included (and supported) by their product is baffling — in fact, we find this behavior absolutely unacceptable.
Comparing GoLive to Dreamweaver
While Six Apart chose to partner with Adobe to bring visual editing of their templates to market, Macromedia Dreamweaver can still be used to create and edit the template files, just without all of the visual benefits.
Using Dreamweaver in this way you'll be restricted to a "code only" view to insert or edit any of the template tags from Movable Type or TypePad. If you happen to switch back to Layout View after adding a template tag to your document in Dreamweaver, the code block won't be rendered with any of the nice Movable Type enhanced style that GoLive offers. Instead Dreamweaver will render the code block as unstyled text, outputting all of the template as raw text. This can be a big inconvenience for a designer hoping to have a good idea of how their page will look with the Movable Type tags integrated into their document.
A comparison screenshot of how Dreamweaver renders the same Movable Type template compared to GoLive is shown below:
Luckily, Dreamweaver's support for Movable Type templates isn't completely a lost cause. Thanks much to Dreamweaver's support of extensions (though the use of the Macromedia Extension Manager), you can download and install the Movable Type / HTML Editor extensions suite in Dreamweaver.
The HTML editor extensions are a set of utilities to assist with the development of Movable Type-enabled pages by providing code hints for any Movable Type 2.xx template tag. Like using Dreamweaver's HTML code hints, just start typing the first few letters of any Movable Type template tag and a code hint will appear allowing you to choose which tag you started to type. Neat!
While it's not a visual way of adding a template tag like in GoLive, the code hint completion is a quick and easy way for veteran Movable Type developers who like to hand-code their templates to save some time. Don't worry if you're not an absolute expert and know all of the Movable Type templates tags by hearts, you can always consults the Six Apart template tag directory or download Jörg Petermann's excellent's cheat sheet (available in both PDF and PNG formats).
Beyond Designers and HTML Editors
If changing the design of your site isn't exactly your cup of tea, Six Apart has realized it can still take work to apply a design to your weblog. They've since reduced the work of switching styles by making StyleCatcher, a new plugin that lets you change designs with just a few clicks, any time you want.
StyleCatcher is a plugin made exclusively for Movable Type 3.2 which enables you to easily download and install styles on your blog with just a simple URL. Even better, it maintains a library of all of your downloaded styles allowing you to switch between them — completely transforming the look and feel of your site — with only a few clicks. Plus, StyleCatcher can even retrieve styles from repositories other than our Six Apart's Style Library, so if you'd like to use themes that are shared elsewhere, you can do that just as easily.
For a more personalization of your weblog, the free Movable Type Style Generator from MovaLog.com offers an easy way to create your own unique theme while at the getting acquainted with the new templates and styles.
The tool is quite advanced allowing you: * Drag the style boxes around to make styling more comfortable for you. * Switch on-the-fly from a 1, 2 or 3 column layout * Switch on-the-fly from a fixed to a fluid layout.
Even better with Six Apart's release of Movable Type 3.2 in September 2005, new default weblog templates were introduced. New among the Six Apart software family of TypePad, Live Journal software are “Smart Templates”, that is — consistent XHTML markup and CSS structure between Movable Type, TypePad, and Live Journal, making it easy to share styles or design for a community of over 10 million weblogs.
Looking ahead and seeing the bigger picture
With already many different ways to edit Movable Type templates, does the GoLive + Movable Type template editing make any sense? For the novice Movable Type user or graphic designer, the visual templating system will make updating and modifying templates easy. For the experienced Movable Type user who prefers to hand-code their templates, the visual templating support in GoLive won't be appealing.
In many ways the visual templating success in GoLive will depend upon several factors:
- If the person already owns GoLive or is considering purchasing it
- The experience and confidence level of editing Movable Type's templates.
- Whether or not it's worth learning a different way.
Regardless of your take of the visual WYSIWYG paradigm, the Movable Type integration into GoLive is a welcome addition. For it:
- Will allow a whole new set of graphic artists to design beautiful Movable Type powered sites and templates.
- Gives the ability to quickly and rapidly add Movable Type snippets to nearly any page within a site.
Pros * Great integration of Movable Type code in GoLive to ease learning curve for traditional visual designers * Makes modifying the default templates and creating new ones easier for people that don't — or can't — write code. * Easy for beginners of Movable Type to see how the tags work instead of having to know which ones to use.
Cons * Poor documentation (can we say non-existent documenation?) * Not all Movable Type templates tags are supported * Including the tags in GoLive doesn't obviate the need to know what tags perform which function and how to customize the output of the tags results * Price of GoLive, popularity and appeal of Dreamweaver over GoLive Improvements
Suggestions * Provide stock Movable Type templates, code samples * Improve documentation, cite limitations of template tags * Movable Type template contest, (think Blogger quality designs with CSS Zen Garden style submissions)
Conclusion
We've extensively uncovered the ways to visually edit your templates in Movable Type and provided additional resources for those who prefer to hand-code their templates or use tools other than GoLive.
While we're excited about this ability, we have reservations of the practical uses and limited scope of being able to visually edit the templates since not all of the tags and functions are available in GoLive.
Furthermore, with Adobe's news to discontinue GoLive and abandon it in favor of Dreamweaver, it endangers the prospect of this functionality being continued. Giving the sheer popularity of Dreamweaver over any other web-publishing software, we're curious as to why emphasis was not put behind the same idea but inspired for Dreamweaver instead of GoLive. Was there a conflict of interest between Macromedia & Six Apart, or was Adobe more open and willing to add this feature to their software?
We may never know the answer, but with GoLive giving way to Dreamweaver it will be interested to see if this feature gets included if at all in the next version of Dreamweaver.
Ryan J. Bonnell is a Web Developer, Student, and leading contributor to MacZealots.com. When he is not playing around with his endless amount of toys, he can be reached at .
Reader Comments (1)
DISCLAIMER: The views expressed below are those of their authors and not necessarily endorsed or supported by MacZealots.com. In all cases, the comments provided here are offered as a courtesy and will be moderated. Any content deemed off-topic or offensive will be removed without notice. Posting a comment here boils down to two things: 1.) Think before you type 2.) Respect the thoughts of others. See our commenting guidelines and/or privacy policy for more information.
#1) On June 11, 2006 4:36 PM
Thanks for this super tutoirial. Wow. I have been looking into using Wordpress but wanted to use something more like Golive for my blogs. And here I see I can do that if I upgrade GL. Super!!!
I still use GL5 so it is time to upgrade and you have shown me the “light.”