Stop the (Design) Madness

I know, I know. As a few readers have wondered: when are the changes in appearance going to stop? Ever since I began the site overhaul I have been at a loss to determine how the site should look and function. The older design was meant to emphasize the “day book” nature of the site, something I want to keep, but I also want to make reading longer pieces easier, and the old design was a little cramped. The old design also didn’t use any of the newer WordPress functionality — heck, it didn’t use a lot of the old WordPress functionality.

In order to make the older site use as few computing resources as possible, I had stripped out much of the dynamic code, but that also meant I lost things like widgets, which make it easy to drop in such functionality as a Recent Posts block. I have also been looking forward to the new post format functionality coming out in WP 3.1. I’m running the beta right now, but I haven’t decided how I want to format visually the different kinds of posts — a visual tag with some changes in what is displayed is the usual way to do it, and that is probably how I will do it, but it also means I need to take my CSS skills up one level (at least).

Here is what I have been looking for in a theme:

  • Support of the new-ish loop.php functionality which makes coding various kind of “sub” pages easier
  • Support of post format
  • A smaller CSS — and one not requiring includes, which a lot of the grid-based styles depend upon
  • White space

This is the new design, by the way. It’s called Jotter and it’s based on Ghostwriter by Bruno Calvacante. Calvacante’s design was lovely, but I wanted something a bit more modern looking. Much of the CSS, for now, is his, but I have slowly been making changes under the hood. But, let me say, cheers to him for embracing the new HTML elements available in HTML5.

Tweaking the New CSS

Regular readers have probably noticed that over the holidays I tried out quite a few themes. There were a few that I really liked, especially Satorii by [Felipe Levin](http://www.yukei.net/), but I decided not to use for one reason or another. In Satorii’s case the CSS was rather involved and depended upon a grid system with which I was not familiar. While I still may return to the original custom theme I made for this site, Jello, I am interested in exploring what other themes have to offer not only in terms of looks but also in terms of functionality. I am particularly interested in finding a theme that will make it fairly easy to implement post formats when they are finally rolled into the official version of WordPress. (They are slated for WP 3.1, as I understand it.)

### Changing Up Fonts

There is the simple version of `@font-face`:

@font-face {
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format(“truetype”);
}

/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}

A more comprehensive version includes using [Microsoft’s embedded font widget](http://www.microsoft.com/typography/WEFT.mspx) — or [this one](http://www.cuvou.com/wizards/ttf2eot.cgi) — and then coding for IE’s inadequacies.

@font-face {
font-family: ” your FontName “;
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(” real FontName “), url( /location/of/font/FontFileName.ttf ) format(“truetype”); /* non-IE */
}

/* THEN use like you would any other font */
.yourFontName { font-family:” your FontName “, verdana, helvetica, sans-serif;
}

There’s more on cross-browser fonts [here](http://randsco.com/index.php/2009/07/04/p680).

Generated Content in CSS

The [W3 Consortium has a handy section in its documentation](http://www.w3.org/TR/CSS2/generate.html) for CSS2 on the service of generated content, e.g. automatically numbered lists, placing a fancy quotation mark in front of a block quotation, etc.

New Design

Over the past week I struggled with the decision to maintain my own infrastructure for my website. For now, I have decided to keep the backend the way it is, but I really wanted a much more compact and simple frontend for the site. I was inspired, in part, by some of [Tumblr’s](http://tumblr.com) offerings and by [Andre Torres’s site](http://notes.torrez.org/). It’s not as stripped down as Torres’, but it’s close enough for now. I was especially inspired by his compacting post title and other meta-post information into a single line. It was a great opportunity not only to learn more about CSS, as the whole re-design was, but to learn a bit more about WordPress’s infamous *loop*. Please let me know what works and what does not. And I am open to suggestions that make the site easier to read or use. (I recognize that my desire for simplicity might make the site harder to use for some.)

Styling for the Mobile Device

The age of the mobile device is upon us. Smart phones, or smartphones, be they iPhones or Blackberries or Droids, are everywhere and making sure our users can access our content in a way that respects the full functionality of their devices and, at the same time, the limitations of their screens is becoming increasingly important. As many web developers already know, the problem is that the browsers on these devices often don’t announce themselves very well, and so you have to guess a bit — or, rather, make it possible for your website to guess a bit.

Here’s the `` code for guessing the iPhone and sending its browser, Mobile Safari, the right style sheet:

``

A good place to begin, as always when it comes to CSS, is [A List Apart](http://www.alistapart.com/), which has an article entitled [Put Your Content in My Pocket](http://www.alistapart.com/articles/putyourcontentinmypocket/).

The Redesign Itch

With the Christmas holidays here and a little bit of time on my hands, I am feeling in the design mood/mode. With the bathroom repair behind me, I am also in the building mood. I don’t know that an overhaul of the JLX site’s CSS would typically fall under *build* but it’s too wet to put my furniture-building plans into effect.

There are several articles discussing CSS3 that are prompting this:

* [24ways](http://24ways.org/) has an article on [making your mockup in mark-up](http://24ways.org/2009/make-your-mockup-in-markup) that repeatedly cites the convenience of CSS3’s ability to use gradients, create highlights and shadows, and to specify fonts as a reason to “design in your browser.” (Much of this is in reference to an overwhelming number of web designers doing their mockup in Photoshop.)
* The author of the “Make Your Mockup in Mark-Up” is [Megan Fisher](http://owltastic.com/) who has a nice site of her own which takes advantage of a number of CSS3’s abilities.
* A lot of designer’s now subscribe to the cult of grids. [Slammer](http://ringce.com/slammer) is a gridding tool that you deploy as an overlay on your Mac — and so it isn’t built into your CSS the way some of the gridding systems are. The interesting thing about Slammer is that it offers you the chance to choose different gridding/design systems: Golden Ratio, Fibonacci, Rule of Thirds, etc.
* One of the cool new things about CSS3 is it’s ability to create alpha effects with color, using the new `rgba` property. It uses the following scheme: `color: rgba(0-255, 0-255, 0-255, 0-1);`.
* Tim Brown has a terrific write-up on how to use [`@font-face`](http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/). He also has a great list of [web design basics](http://nicewebtype.com/notes/getting-started/) that are worth reading either when getting started or reviewing when you feel the need to revisit the basics.