hyalineskies

It’s pretty obvious now that big changes were planned for hyalineskies. Now, four months of development later, I can welcome you to this beta version 7 of hyalineskies, named Aerial. If you’re new to hyalineskies, I hope that you’ll stick around; if you’re a regular, you’ll notice a few changes.

A new home

Due to Dreamhost’s absolutely awful outages last month (where hyalineskies was down for nearly 72 hours,) I’ve moved hyalineskies from the wonderfully-cheap Dreamhost to the much more expensive (yet more responsive) MediaTemple. In the meantime, I’ve lost my beloved WebDAV. I’m not running a dedicated server at MediaTemple, and MediaTemple costs me more a month than Dreamhost did for a year, but at least I can rest assured that hyalineskies will be up for all of you to enjoy. If it isn’t, I have a 24×7 direct-to-human telephone support line. If you really love hyalineskies, please consider donating to the cause. This blog has become way more over the past year than I ever could have imagined, and I’m here to make sure it stays up for everyone who finds it so beneficial.

Putting the sky back into hyalineskies

While this domain, hyalineskies.com, came out of a brainstorming session for a band in my junior year of high school (this was a band name we didn’t choose, but I loved enough as a personal site,) it’s rarely — if ever — acknowledged its literal meaning. Through a bit of clever copy, the sky’s back into hyalineskies, starting with category names.

• The featured category is now First Class, the category for all of my best articles. These articles explain web design, journalism, advertising, and geek culture in-depth, and are generally my primary source of traffic.
• hyalineskies personal is now Economy Class. The posts that go into Economy Class are the things I think about day-to-day, and may be introspective, talk about something going on in my life, or things I buy and rant or rave about. Generally, it’s the latter.

There’s also this fancy schmancy new section called Pilot Training, created after hyalineskies readers e-mailed me asking me for help with social network profiles, WordPress plugins, and more. The entries posted under Pilot Training will almost entirely consist of concise technical tutorials, meant to solve a specific problem in code or design. If you have an idea for a Pilot Training article, e-mail me and I’ll see if it’s doable. If it is, I’ll write it into a queue. You may notice that Pilot Training also has its own RSS feed, for those who think my writing is boring and just want answers to questions.

Priority goes to the page

As many blog designers continuously redesign the home page of the blog template (and, consequently, the home is the page that hits CSS galleries for good design,) my priorities went to the entry page, as the amount of page views and time spent on an entry page dwarfs the use of the home page. In many cases, this post page is neglected and viewed as secondary.

Ironically, however, this breaks a fundamental process of the social web and user-centric experience design; users generally link to individual entries, not the site root. This is a logical use of the blog: the information most relevant to a reader exists on the entry page. Because of this, landing on an entry page is drastically more probable than landing at the home. In the case that one of your posts is featured on a blog or a high-traffic aggregator such as Digg, a single post can easily eclipse your total home page views. Site metrics generally agree with this trend: in the case of my old job at The Michigan Daily, our most-trafficked pages were sports articles. In the case of this site, it’s Facelifting the Facebook.

Because of this, the most attention went to the optimisation of user experience on the page. Objectively, Aerial’s page view serves the most relevant content to a user: it gives access to post text, social bookmarking tools, easy navigation to relevant posts, and an easy interface to both facilitate and stimulate user-driven discussion. Aerial’s page view sidebar is designed with site metrics in mind, offering links to the About Page and a full set of browsing options, with category view, Most Popular Entries (extracted from the Mint statistics themselves,) and Noteworthy Entries within an expandable moo.fx accordion, building simple link functionality above the scroll. If the user cannot find what they’re looking for, search is placed in a prominent position as well.

Body copy layout takes its cues from both newspapers and blogs, offering built-in space for a photo/illustration and its caption without intruding on space for copy. Brand identity is minimised in the masthead to a smaller logotype than on the homepage, with underlying breadcrumb-style navigation to change global site scope if necessary. When it comes to an article, it’s the article content that gets priority.

Putting the social back into social web

Although most blogs have an interface for social interaciton through comments, the Web 2.0 explosion has left us with an array of tools and user understanding that is generally neglected in theme authoring. The Aerial pages were designed to stimulate social interaction and focuses primarily on making blog communication seem more human.

The least noticeable change to comments — yet the one that is most natural — is the use of relative dates as opposed to date stamps. It takes more effort to cognitively calculate date differences than it does to perceive those differences verbally; because of this disparity, dates in discussions are displayed in relative terms. It’s much easier for a commenter to track a discussion in terms of hours or days ago than in timestamps, especially across time zones.

To continue humanising the blog discussion experience, Aerial uses the Gravatar system to increase identity and human recognition. If a user has a gravatar, it shows up next to their post (and, if you don’t have one, go get one — they’re free.) To help as a visual cue, my own comments are outlined in cyan to denote them as official. (Taking a cue from newspaper typography, my comments are also the only justified text on the site; in news design, a justified column is usually hard news, while a left-justified column, known as “ragged right” in the news design sphere, denotes an opinion article.)

Some features exist simply to make life easier; Comment RSS feeds exist for tracking discussion from a newsreader and Technorati tag support (finally!) offers greater information flow to and from the greater blogosphere. Blog trackbacks/pingbacks are separated, Moveable Type-style, to maintain discussion legibility in popular posts as well as provide a quick index to other blogs.

Kissing old browsers good riddance

With less than five percent of aggregate hits coming from obsolete browsers (IE versions less than 6.0, old versions of America Online, and Mozilla <5.0,) old browser compatibility isn’t much of an issue to hyalineskies. Even so, that 5% is intercepted by a custom WordPress plugin and sent to the text-only hyalineskies mobile edition.

Oops, I guess I’ve spilled the beans on that feature. If you visit hyalineskies from a handheld or cell phone, you’re sent to a version of the blog created specifically for mobile browsers and smaller screen resolutions.

The visual design of Aerial

Putting the architecture and new features aside, Aerial was influenced by many different design styles, trends, and methods found online, building a coherent, clean design.

Let’s talk type

The site’s typography and the majority of its margins are built on the em (em-space) measurement in CSS to allow for easy text resizing in case of accessibility issues. A lot of care was taken to follow Robert Bringhurst’s classic The Elements of Typographic Style. Gone is the justified body copy on Gridlock; the left-aligned text in Aerial is much less fatiguing to the eyes, especially when reading longer entries.

The hyalineskies logotype has also been refined, giving a more customised, streamlined, and (in some way) ultra-modern look. The hyalineskies logo is based off of Max Miedinger’s Helvetica; specifically, off of Helvetica Neue 45 Light. Headers are implemented both in CSS-placed images and Mike Davidson’s sIFR in Adrian Frutiger’s beautiful Avenir font family. Headlines use Avenir 65 Medium, while headers use a tightly-tracked Avenir 45 Book.

Following the grid

hyalineskies is built entirely on a grid system (see the illustration above for a clue,) composed of eight 105-pixel subcolumns with 10-pixel gutters, making a total of 4 220-pixel supercolumns spaced with 10-pixel gutters themselves. A closer view of the Aerial source code shows a set of div CSS class attributes, from colOne to colSix (plus their noMargin variants,) allowing the entire site to be built semantically on the grid system by re-using CSS classes and structures. This is another one of Aerial’s homages to the world of print (specifically, news) design, and the end result is remarkably organised.

New microformats

Just like the photo/caption, hyalineskies also has new microformats for video posts, code blocks, and downloads, all integrated into WordPress’s content management system and stored in the database. Video hosting and software is handled by the sweet Vimeo service (as YouTube’s player is way too ugly), and downloads are handled locally on this machine.

Symbology

Icons within Aerial are from the massive Silk Icon Set from FAMFAMFAM. I eventually decided to use the FAMFAMFAM icons after having tried numerous other icon sets (and even creating a set myself) as they fit the site best.

The future of Aerial

A lot more has to happen to Aerial before I can remove its beta tag, and yes, some functionality isn’t done yet. You may have noticed, for example, that whatever “S10″ is is “coming soon”: to add more information, S10 will finally be my on-site portfolio, which I’ve already started development on. (As for the S10 name, it was coined by an intern at work: s10 = ess-ten = Eston, my first name.)

I’ll also be posting plenty of new WordPress themes and plugins within the next week, including Gridlock itself, the old hyalineskies template that everyone seemed to love so much. I’ve also got one called Garamond Scenario, as well as the Old Browser Detect + Mobile Edition plugin I’m using here on Aerial. Stay tuned for all of this cool WordPress stuff coming soon.

I’ve also been kicking around the idea of buying FontLab’s TypeTool and starting a tiny little hyalineskies font foundry, where all fonts in the library would be free. I’ve already drawn out some pixel-font prototypes, with a real sans-serif in a rough conceptual stage. I’ve been lurking around Typophile a lot these days, and it’s been inspiring for a newbie like me.

hyalineskies is also getting more official, as I’ve applied for an ISSN with the Library of Congress to register hyalineskies as a true online serial. Because of this, expect to see a more regular update pattern. Speaking of regular updates, I’ve got three entries pre-written to release for the site; now that Aerial’s development is (for the most part) complete, I’ll have more time to write the entries that bring you here.

It’s still a beta, after all

Remember that Aerial is still a beta version, and I’d like as much help as I possibly can finding (and, if you’re feeling generous, squashing) bugs. I know of quite a few that exist in Internet Explorer 6, but if you have any bugs on your browser that you think I may not know about, contact me ASAP at eston@hyalineskies.com with your bug, a full description of how to reproduce it, and your browser/OS version. I’ll do the best I can to accommodate you.

Well, enough of my blabbering on about this theme. Go explore it for yourself.