Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Colophon

This site is an ongoing, evolving experiment in creating a visually appealing site that is also standards compliant, accessible, and still usable in older browsers. I also strongly support WaSP (Web Standards Project), the W3C, and the WAI (Web Accessibility Initiative).

Design, Development, Content

Created, designed, and written or spoken (using speech recognition software) by Shirley Kaiser, SKDesigns.

About the Latest Design

23 October, 2006: The most recent design is Version 4.1, launched 23 October, 2006. Version 4.1 is a visual design improvement and tweaking to the new Version 4, launched 22 September, 2006. Version 4 replaced the 3+ year-old Version 3 from July 2003.

Special thanks to the ladies and gents of the fabulous Wise-Women discussion list for the invaluable feedback that resulted in the launch of Version 4.1 (launched 23 Oct. 2006).

Why the New Design?

Although I still like the visual design of Version 3, I needed to update the site behind the scenes to take advantage of changes and improvements after I created Version 3 over three years ago now. That includes improved CSS, improved accessibility, and improved server-side scripting. During the process, I decided to go ahead and change the visual design, too.

Inspiration for the New Design

The colors for the new design were inspired by thoughts of lounging happily at my favorite beach, surrounded by fresh air, inviting crystal clear water, soft white sand, and gloriously warm sunshine and blue sky.

The texturing within the topmast, footer, sidebar, and possibly elsewhere come from my favorite well-worn and soft blue jeans. I originally started creating a design based on those jeans but as inspiration goes, the design ended up evolving into using colors from my favorite beach while still using the texture from my favorite jeans.

Typefaces

Adobe Caslon Italic OsF (Old Style) is the font used for the header title, the background image (ampersand), and the favicon. Adobe Photoshop CS3 Extended [Windows]

Graphics Software

Adobe Photoshop was used to create this site's visual design and for graphics throughout the life of this weblog.

Behind the Scenes

September 2006: What goes on under the hood here makes all the difference in managing Brainstorms and Raves. The latest Version 4 uses even more automation to make the site and all the content even easier to manage than Version 3. I've been writing this weblog since December, 2000, so the site has accumulated quite a few posts! During that time I've also added other articles, references, and the Luscious Links and Attack on America sections. Automating as much as possible of the content management makes it all incredibly easy. I describe some of that below.

Standards, W3C Recommendations

The Brainstorms & Raves site is designed to take advantage of the latest browser version features and to comply with W3C recommendations. The entire site is designed to be CSS 2 and XHTML 1.0 transitional compliant. RSS feeds validate to the RSS 2 specification and conform to the XML 1.0 specification.

Markup, Programming Software

Bradsoft TopStyle Pro is my tool of choice for all CSS, XHTML, HTML, XML, JavaScript, and server-side scripting needs.

Weblog and Content Management Software

Movable Type 2.66 is the software used to manage the entire Web site, not just the weblog posts. Creating an Entire Site with Movable Type is a post with links to some insightful posts around the Web about possible ways to use Movable Type for an entire Web site, including static pages. See also the Colophon category archives for more on using Movable Type for an entire site and the Movable Type category archives for more on Movable Type.

September, 2006: I continue to use Movable Type for this entire Web site. I also use quite a few plugins, as noted below. Why do I still use Movable Type? It works well for my needs and I'm quite satisfied with it. Do I recommend its use? Of course. There are plenty of great choices out there now, too. See my Luscious Links section, Weblog Programs, Tips, Templates section, for more possibilities.

As a Web site designer by profession, I design and create my own templates to use for this site, though, rather than the default templates provided by Movable Type or anyone else. For the latest Version 4 design and development, in addition to taking advantage of Movable Type's automation, I also use other server-side scripting for other automation and streamlining, such as for per-page navigation and navigation cues.

Movable Type Plugins

The list below represents most of the fantastic plugins used for this site. If you're interested in more, check the Movable Type category posts and Movable Type Resources.

  • Amputator 1.2 for Movable Type and Blosxom (Nat Irons) New! 
    Safely” rewrites the ampersand character to the HTML entity reference '&.' A helpful plugin used here to automatically convert the ampersand wherever needed by adding it to a particular MT tag, such as <$MTEntryBody encode_ampersands="1"$> or <$MTCommentAuthorLink encode_ampersands="1"$>. This particular plugin is smart in that it will NOT convert already existing ampersands within HTML entity references. Added during September 2006 redesign.
  • ArchiveYear Plugin (Lummox JR)
    Provides auto-generated yearly calendar views, including next and previous contexts. Used to generate the yearly archive pages. September 2006: No longer using this one with the September 2006 redesign. Still a great plugin, though.
  • Collect (Kevin Shay)
    Used to generate Archives by Link Citation.
  • Compare (Kevin Shay)
    Used in a variety of ways, such as with SimpleComments to display contents meeting specific criteria, such as showing the number of comments only if greater than zero and showing different messages depending on the number of comments or trackbacks. Also used throughout the entire site for Web site navigation to display specific navigation depending on the section.
  • DaylightOrStandard (Kevin Shay)
    Used to designate standard time or daylight time by specific entry date throughout the year.
  • Global Listings (Stepan Riha)
    A helpful plugin that “allows you to list Entries, Comments, Categories and TrackBack pings across multiple blogs within one MovableType installation.”
  • Glue (Kevin Shay)
    Used to “glue” HTML between list items but not after the last item, such as on my Archives page for the listings of Archives by Category and Archives by Month.
  • IfEmpty (Brad Choate)
    Used to display or hide MT variables, such as my category descriptions within Category Archive pages. For more information, see also MT's support forum, MTIfEmpty, MTIfNotEmpty, General-purpose IF tags for templating.
  • Last Modified (Kevin Shay)
    A helpful plugin for including the last modified date for an entry. Used on the Reference section's main page to indicate page updates, and with all posts.
  • MT-Blacklist (Jay Allen)
    An invaluable plugin to help eradicate comment and trackback spam. I can't imagine what I'd do without it, short of having to disable commenting and trackbacks.
  • MTCollate (Stepan Riha)
    Used to collate, organize, and display contents, such as the Comments listing by post title on the main page's sidebar.
  • MTFastInclude (Kevin Shay)
    Used to speed up the processing of MT's include files on the server.
  • MTKeywords (Richard D. LeCour)
    A helpful plugin that I've used for an RSS feed with iTunes Podcast specifications, which includes an XML tag for keywords. The plugin generates keywords automatically based on the post content.
  • MTMacros (Brad Choate)
    An invaluable plugin used within every single page at this site. For example, it's used to add the curly quotes, blockquote citations, and underlined acronyms and abbreviations throughout the site.
  • MTOtherBlog (David Raynes)
    Used in a variety of ways, such as to include Outgoing Pings from several blog setups within my site.
  • MTPingedURLs (David Raynes)
    Used for Outgoing Pings listing to generate the pinged site's URL (MT only generates the trackback URL).
  • MTRelativeURL 1.0 (Stepan Riha)
    Used throughout all the pages at this site for internal links. Movable Type generates absolute URLs for all internal links, even when relative links are more appropriate. MTRelativeURL converts specified URLs to relative links.
  • PerlScript Plugin (Brad Choate)
    Used in conjunction with Brad's MTMacros plugin to add acronyms and abbreviations markup throughout the entire site.
  • Regex Plugin (Brad Choate)
    Another invaluable plugin, this powerful plugin provides search and replace parameters for elements produced from Movable Type templates. Used within every single page at this site.
  • Short Title Plugin (Dave Dribin)
    Makes use of the keyword field with brackets [custom] around the keyword to specify the URL. See also his Index patch to remove the index.html endings requirement within directories and the Movable Type Hacks below for another approach by Már Örlygsson.
  • SimpleComments (Adam Kalsey)
    Comments and trackbacks can merge into a single list with a combined total, while also differentiating between them. Used with all the entries at this site.
  • Supplemental Category Tags (Brad Choate)
    Provides 'next' and 'previous' category links, which I use within the Archives by Category section pages.
  • Word Count (Adam Kalsey)
    Counts your entry's words and inserts it into your page.
Movable Type Hacks

Admittedly, initially I was a little nervous about messing with MT code, as I'm not a programmer; however, the instructions are easy to follow within the links below. If you can follow simple directions, these are easy to implement. Remember to always make a backup copy of files before you make any changes.

  • Avoiding Duplicate Comments 3.01 (Stepan Riha)
    This hack modifies Movable Type to ignore the same comment being entered multiple times for an entry. I've used this for quite some time now, and it's eliminated the problem of duplicate comments on the same entry.
  • Avoid Duplicate Trackback Pings 1.0 (Stepan Riha)
    This hack modifies MovableType to prevent duplicate trackback pings for an entry. Works beautifully!
  • Howto: Future-proof URLs in Movable Type (Már Örlygsson)
    I used most of his instructions and hacks to customize the URLs for my entries by removing the index.shtml ending. I also included the hacks to customize the Comment URLs, comment-post redirect, trackback ping URLs, and email notifications, also to remove the index.shtml ending.
  • Receive Email of Notification Subscribers (Timothy Appnel, via thegirliematters.com)
Movable Type Scripts
  • MT-Medic (Stepan Riha)
    An incredibly helpful CGI application “that allows you to do some useful or emergency tasks on your MovableType installation.” You can check configuration, plugins, filters, authors, blogs, and permissions. I found it especially helpful for checking my new configuration and troubleshooting plugins when my ISP moved my MT installation to a new server August, 2005.
  • Movable Type: Unsubscribing from Notification List (Sherzod Ruzmetov)
    Movable Type's Email Notification script does not include the ability to unsubscribe. This script replaces the existing mt-add-notify script and provides the options to subscribe or unsubscribe. Used on the Email Update Notification form.

Other Features

I've made use of a bit of JavaScript to provide alternative font sizes for visitors and a script to show/hide my daily reads menu and other longer navigation menus in the right-side column. Here's where you can find the scripts:

  • Alternative Style: Working with Alternative Style Sheets
    by Paul Sowden. Read how to implement alternative style sheets for your site, such as font sizes or visual appearance.
  • Collapsible Menus: Showing and Hiding
    DOM-based scripting to implement a show/hide toggle, such as what I use with my new design's right-side column to toggle my daily reads list and other longer navigation menus in that column. Designing with Web Standards, by Jeffrey Zeldman Based on the DOM, this JavaScript and CSS is explained in Designing with Web Standards, (First Edition), Chapter 15, Working with DOM-Based Scripts: Showing and Hiding, by Jeffrey Zeldman (published 2003). This particular version provides an accessible, cross-browser, cross-platform approach that provides graceful degradation if needed. The chapter section is easy to follow, and the script is provided in the book. Visit the companion site for more info about the book, too. Note September 2006: This showing and hiding doesn't seem to be included in the new 2nd edition. A good alternative online that's quite similar to this one is the ECMAScript Menu System, by Gez Lemon, Juicy Studio.

Updated 20 September, 2006

Colophon

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points, by 37Signals. New Riders Press (March 2, 2004). 

Web Accessibility: Web Standards and Regulatory Compliance

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/colophon/
Page last modified 21 February, 2007 - 11:40am PST Page load time: 0.010582 seconds.