Category Archives: Site

Simplifying Site Design

With the basic site up and running for almost a couple of days (wow!), I decided to test the theory of being able to change just the templates for an entirely new look. I also changed some of the site design (not just the appearance), so it turned into changes to the articles as well. Future redesigns should be able to just change the templates for a whole new look.

I consulted a few reference sites for CSS layout techniques (notably Glish and BlueRobot). I settled on the Two Columns – Left Menu design from BlueRobot because it was simple and matched what I was looking for. I tweaked the CSS a little bit to use percentages for font sizes instead of pixels.

I also added in a couple of other style definitions, include a special set of “print only” styles. The print-only style sheet allows you to redefine your styles (or define new ones) that will only be used when printing. You can transform your colorful site with wide margins and indents into something much cleaner on paper.

The second stylesheet is linked in with the media attribute set to “print”:
  <link rel="stylesheet" href="layout1.css" type="text/css">
  <link rel="stylesheet" href="layout1-print.css" type="text/css" media="print">

The layout1-print.css file overrides most of the styles defined in layout1.css. My favorite trick (which I first learned about on Evolt.org), is the following style definition which will display the actual URL after a hyperlink:
  A:after { content: ' [' attr(href) ']'; }

Sadly, this trick only works with Netscape 6.x, Mozilla, or Opera 6.x (I believe).

I also included in the standard template a “current URL” field that will only show up when printed. This could be useful as a reference to confirm the page location. (Although most browsers put this in the header or footer anyway.) One side effect: browsers that don’t understand CSS (Netscape 4.x, mobile devices) will always show this URL, so I put it at the end of the page above the copyright.

Update 4/22/02: Just found a good article on NUblog that describes printable page design with CSS.

Update 4/27/02: Another good article on print friendly links on Diveintomark.org.

Update 5/10/02: Yet another article describing the use of CSS in print style sheets on A List Apart.

Update 10/5/02: I updated the whole look and feel of the site, going away from the old Bluerobot.com design. I wasn’t able to do it with just the CSS (as I had hoped), but it only took a minimal change to the CityDesk template.

Continue reading Simplifying Site Design

Task List for Accessibility

Now I’ve got a new challenge for my site: go through Mark Pilgrim’s Accessibility series. I’ve been following along over the last 30 days, so the challenge now is to see how much of this I can accomplish with CityDesk.


For most of the tips, Mark gives instructions for Radio, Movable Type, Blogger, and other weblog tools. CityDesk probably isn’t the best tool for weblogs, but this should be an interesting exercise.

Redesign: News v Articles

From my last redesign, the main page of the site was simply a list of each article. Tonight I made a better distinction between “news” items and “articles”.


News items are based on the current date and can contain anything from a short concept, a link to something interesting, or an introduction to a longer article on this site. It’s kind of based on the weblog concept, although I doubt I will be writing often enough for it to be considered a true weblog.


Articles are the longer stories and ideas. The Articles use keywords as categories such as “Palm”, “Site”, etc. The standard links on the left of each web page will bring up a page with all articles matching that keyword.


For this change, I also made a slight change in CityDesk so that I’m only using one template. Using the built-in script language I’ve got a couple of conditional includes for the site’s home page as well as all the articles and news items.


See the before (PNG, 19 KB) and after (PNG, 22 KB) pictures of the home page.

CityDesk and CSS: Testing the theory

With the basic site up and running for almost a couple of days (wow!), I decided to test the theory of being able to change just the templates for an entirely new look. I also changed the site design a little bit, so it turned into changes to the article content as well. Future redesigns should be able to just change the templates for a whole new look.

Transforming Cantoni.org with CityDesk

I’m using CityDesk software from FogCreek to maintain this site. It’s a simple but powerful content management system for small to medium sized sites. I was one of the beta testers for the software and have found that it does almost everything I want.

A couple of problems I’ve found are:

  • CityDesk uses the Microsoft DHTML edit control for editing articles (CityDesk’s terminology). Unfortunately, the editor will make mistakes in the HTML code created. Most significantly, it will remove quotes from attributes (e.g., height="60" becomes height=60) and it will change tags to upper-case (e.g., <p>Hello, world!</p> becomes <P>Hello, world!</P>. Both of these problems prevent support for XHTML.
  • CityDesk stores all of the web site files in a single data file (*.cty, MS Access database format). For the Pictures portion of my site, I’m a little leary of putting so many large files into this database. I haven’t had any problems with it, so maybe it’s just a conceptual roadblock I have. It’s not a big problem; I just include the Pictures index file in CityDesk and manage the remaining files externally.

To be fair, I should also mention some of the things that CityDesk is really good at:

  • Because it uses a template system, you can easily change the look and feel of your site and republish. It does a good job of separating your data (basically, the articles) from the presentation (the templates).
  • There is also good support for weblogs or writing articles with headlines, teasers, sidebars, etc.
  • A built-in scripting language works with the templates to help create dynamically-generated websites.
  • The resulting output from CityDesk is a series of static HTML pages, suitable for posting to any web host. You do not need a script-enabled web host or control of the host yourself. In one sense, using CityDesk gives you the best of both worlds: a dynamically-generated site that simplifies maintenance and statically-served web pages that make visitors happy.

Design Goals

With the current limitations of CityDesk, I’ve chosen to use HTML 4.0 Strict mode in conjunction with CSS. This provides a good level of separation between content and presentation. Ultimately, I’d like to be able to make the whole site XHTML compliant.

In addition to making the site easier to update visually, using CSS allows the site to degrade gracefully for older browsers that don’t fully support it. This also holds true for accessing the site from mobile devices, such as a Palm handheld.

For example, see sample screenshots from Netscape 4.79, or Internet Explorer 5.5, or from a Palm device. (Images are in PNG format.)

Resources

At some point I hope to publish a more extensive list of resources. In the meantime, here are a couple of quickies.

Web Design Group
Diveintomark, especially see Accessibility Statement
Joel on Software (founder of FogCreek)
CityDesk
Evolt.org