Main Content
Months ago when I first designed this site, I was satisfied with the approach taken regarding its structural implementation. In an attempt to keep things simple, I divided the site into two sections, articles and notes, which were administered by my CMS of choice, ExpressionEngine. And in an effort to be creative I had decided to custom design each article and certain notes—thinking the process would be easily manageable—by dumping the cascaded styles in an internal style sheet contained in the head section of the document page. ¶ Of course, however hopeful I was regarding the system I had implemented, I found myself having to overcome self-created obstacles which made the process of publishing more laborious than it needed to be. Having to edit an entry’s custom field in the EE control panel just to change the color of a background element and needing to overwrite default styles grew tedious. There had to be a better way.
“Why bother?”—would be a reasonable question to ask. After all, this site is no more than a blog which could have been created with any of the available blogging software, whether Wordpress, Text Pattern or even Tumblr. And although these publishing platforms may not allow the flexibility of EE, each would perform adequately. The answer—which would be the same for much of my empirical experience—is the pursuit of craftsmanship. An ethos, shared by a web community of writers, designers, developers and services, which goes beyond the desire to do a good job, but find the meaningfulness of intention. Because, ultimately, craftsmanship is about the specificity of intent. A quality which is greatly evidenced in print in the form of books and magazines, but is still missing from much of the web.
Upgrading to ExpressionEngine 2
I have made mention of it before, and I will do so again here: the trigger for the redesign was Andy Johnson’s tutorial on using EE to build a simple Tumblr-like blog similar to the Journal used by his design studio, Shaping the Page. I used the methods outlined in his post to restructure both main sections of my site. Each section, articles and notes, became parent directories for their respective group of channels. For the log notes, channels were created based on type (e.g., full entry, photograph or commentary); while a separate channel was created based on a particular theme or layout for the articles. This approach provided me the flexibility of tailoring the template markup for the particular purpose of each channel.
As would be expected, this restructuring of the backend meant a complete rebuild of the site from scratch. So, I took the opportunity to also upgrade my installation of EE from 1.6.9 to 2.1.4(beta)—albeit not necessarily a true upgrade, but more of a transfer of content and assets from one installation to another. A time-consuming process, yes, but not nearly as cumbersome as it could have been. Additionally, by the time of this redesign, EE had matured into a more stable release. And, thankfully, several of the plugins and add-ons I had been using in EE 1.6.9 were finally ported to EE 2, making the transition smoother.
Add-Ons
Of the various applications I use, I can only think of a very few which are not dependent on third-party plugins or add-ons. It is no different for EE. You can do a great deal with a base installation of EE—many have—but its power and functionality is greatly improved by the wide selection of available add-ons. Here are a few I use for this site:
- NDG Flexible Admin: A useful and almost indispensable add-on module which allows me to fully customize the EE control panel. I am able to build out my own tab menus, thereby minimizing the much maligned accordion-like sub menus which come standard with the default install. Developed by Nico De Gols.
- Matrix: Really, who builds an EE site without using this add-on? I use Matrix to create custom fields for meta data, uploaded files and photographs, and URL links, but a great deal more can be done with it. Developed by Brandon Kelly of Pixel and Tonic.
- Sitemap: There are several ways to build Google Sitemaps in EE; create your own using the templates in the EE wiki or use one of the available add-ons. In this case I chose to use the Sitemap Module by PutYourLightsOn which automatically generates sitemaps and allows me to select which channels to include in the sitemap from the control panel.
- Shortcut: This add-on serves the same role that other URL shortening services like bit.ly or TinyURL play. But, it allows me to use my own domain name and I am able to create custom keys to identify each entry’s permalink. Developed by Solspace.
In addition to the above, there are several other commercial and non-commercial add-ons I use which have made things easier. Although, for a small site like this, it is difficult to justify the expense of buying commercial add-ons; I need to balance my immediate need, the cost of the add-on and whether I can use the available tools within EE itself. Of course, it’s always good to support the developers who have built so many useful modules, extensions and plugins. In this regard, the best resource for finding and purchasing these add-ons is Ray Masuga’s Devot:ee, a site dedicated to EE which has become the go to repository for all things related to third-party add-ons.
The Installation
For this installation of EE 2, I followed the principles described in Mark Huot’s book, Securing ExpressionEngine 2, to secure the site’s file system. For the custom CSS I use for each article, I have moved the styles from the head element of the document page to a template group named “styles” and saved each article’s CSS as a template file. In contrast to the earlier EE 1.6.9 installation, I decided to mirror the live install with a development install. Doing so, allows me to draft articles and test add-ons locally while not compromising the main site.
Typographical Indulgences
Over the several months since I last wrote about web typography, the landscape of web fonts has improved greatly, with more typefaces being hinted properly for screen use and more font foundries making their libraries of typefaces available for use on the web either directly or through web font services. The number of websites using web fonts has also increased exponentially to a point where it is now commonplace. Unfortunately, the use of these wonderful typefaces through the @font-face CSS declaration continues to expose the font rendering deficiencies of the Windows platform.
All too often I come across a website using a web font service to serve a typeface for headings which looks clean and smooth on the Mac, but completely falls apart on Windows—turning a once beautiful typeface with elegant outlines into a malformed wretch with unsightly edges. As it stands, my earlier conviction to use Cufón is affirmed. Regardless of platform, my headlines will always look clean no matter the font size. Unfortunately, not many font foundries license their typefaces for font embedding using Cufón. Two foundries that allow for such font embedding are: Jos Buivenga’s exljbris Font Foundry; and Ray Larabie’s Typodermic Fonts. You will see their typefaces throughout this site.
As this site’s owner and author, I take responsibility for its design and I firmly believe that I have an obligation to the type designers whose typefaces I use to make sure that their web font versions are shown in the best light. If web font services and font foundries are truly committed to making the web beautiful through typography, certainly they are aware that they are doing a disservice to the type designers, whose work is being defaced on the Windows platform, by not providing an alternative method to use their typefaces for headlines. I wince every time I see a lovely typeface get mistreated on Windows when it is used as an over-sized heading. Now, I do understand that my plea for foundries to allow Cufón embedding will fall on deaf ears—for a variety of reasons—nevertheless, I do think it’s worth considering.
An Outro
There are similarities between the two companies I rely on for this site, Ellis Lab, the creator of EE, and Typekit, the web font service. Both provide products and services which not only help developers and designers craft beautiful websites, but allow a web author like myself to build out a custom site like this blog. They have invested in their respective communities by participating directly with their customer base, both online and in person, and by hiring community architects and managers that provide a much needed human face to what would otherwise be an anonymous relationship: Tim Brown and Mandy Brown for Typekit; and Leslie Doherty for EllisLab. And just as importantly, they share a similar desire to continue to refine and improve their services or products, not simply to sell more subscriptions or copies of EE, but because of a firm belief in the idea of craftsmanship. In this sense, my use of EE or Typekit is not predicated on the principle of finding the right tool for the job, but of custom-building the right tool—or in this case, the right framework.