Endikos

Archive for the ‘Cogitatio’ Category

Time Warp

Friday, March 19th, 2010

Similar to the college student that fits four years of college into six years, it looks like I’m going to fit a years worth of photos into a year-and-a-half.  My apologies for being unable to pick up the camera as of late, external commitments have been keeping me so busy I couldn’t take the time to shoot something.  I’m hoping that this weekend I’ll have some chances to bring you some awesome stuff!  Stay tuned…

Another Reason to Love Apple

Tuesday, February 9th, 2010

Apple’s really earned my loyalty.   Here’s the latest in a long series of examples where Apple has taken really good care of me.  Late last week I ordered Aperture 2 from Apple.  I haven’t received it yet, and this morning I learned that Aperture 3 just came out.  I’d missed it by a few days.  I called Apple, thinking that maybe they’d take pity on me, but fully expecting that they’d say “wow, that’s really a shame, but it’s $99 to upgrade to Aperture 3″.  Instead, they say they understand and they emailed me a link to print off return labels for the copy of Aperture 2 they sent me when I receive it, and now they’re sending me Aperture 3 instead.  Apple, you rock.

Designing for email, and feeling dirty because of it.

Monday, February 23rd, 2009

[Note: This post has been moved to ThreeBit Media, my consulting website.]

Back in my first Designing For Email post, I discussed workable dimensions and some common-sense techniques when you’re approaching designing for email.  Most of that still holds true, but I’ve discovered an unpleasant lack of support in a few email clients for an important bit of CSS: floating, clearing, and margins.  The lack of this one bit makes good design wholly in CSS nearly impossible.  I’m officially peeved.  What’s really weird is MS Outlook.  Outlook 2003 supports floating just fine.  Outlook 2007 does not.  So what does this leave me with?  Table-based design.

Yeah, I know. Seriously.  After all this time when CSS has (finally!) become a standard method of layout.  When people are finally getting the whole point of separation of concerns when it comes to content versus layout, and browsers are getting good support, and for the most part I can get my designs to be pretty consistent across browsers without much effort as long as I closely follow the rules…  I’m having to retrofit my CSS-based layout into a table-based design.

As I was coming to grips with this I did a sanity check by looking through the last few months of my inbox and looking at the adverts (non-spam) I’d recieved.  A quick look at the source confirmed that they were ALL table-based.  Dang.  And now the fellow across the hall is making fun of me.  He knows how dirty I feel for having to violate standards to make something layout correctly.   Oh well.  For what it’s worth, I did stumble across the Email Standards Project, which is what confirmed that Outlook 2007 and Gmail (!) both lack support for floating/clearing.  So, have fun dusting off the table-based design knowledge you’d accumulated and then happily buried when CSS finally became a viable alternative.

Designing for Email

Tuesday, December 9th, 2008

[Note: This post has been moved to ThreeBit Media, my consulting website.]

My company is about to launch an email newsletter and I began to wonder about what layout dimensions I should shoot for.  I’ve not given it a lot of thought in the past, but as I’m building a template for repeated reuse, I’m now giving it a few neuron cycles. There are a couple of major issues with designing for email that are reminiscent of the especially difficult browser-compatibility problems that have caused multitudes of web designers to rage and wail and burble incoherently.  These issues are essentially this: 1) email clients don’t give you a lot of room to work in; and 2) email clients are not full-featured browsers.

Let’s talk about physical dimensions first. An email client is designed and navigated differently from a browser.  The “chrome” on most modern email clients include not only the toolbars and menus, but an entire left-hand column used to navigate mail boxes and other features.  This column alone consumes a couple hundred pixels of horizontal real estate.  Vertically, the space is usually split in half so that the user can see a list of messages in the upper half and then view them in the lower.  When all this is taken into account while still designing for a small common screen resolution on the order of 1024×768, you wind up with a usable viewport more in the neighborhood of 650×300.

Now take into consideration that the (X)HTML rendering capabilities of email clients are not necessarily on par with fully-featured browsers.  For security and speed, most email clients have a very limited set of supported browser features.   Most won’t display flash, few support animated gifs, and JavaScript support is typically limited.  Thanks to spam, you’re not even guaranteed any images will display at all, but fortunately, most of the time plain-jane images will load just fine.

So here are a few guidelines for (X)HTML-formatted documents delivered via email:

  1. Keep your overall width between 600 and 650 px.  This should be old-hat to those of us that were designing around the turn of the century, and will be an interesting excercise to the neophytes.
  2. Remember that the “fold” on an email client is likely going to be around 250-300 pixels down the page, so make sure you have something above the fold that will make your user want to scroll.
  3. Keep it simple.  Avoid JavaScript.  Use well-supported (X)HTML and (inline or on-page) CSS only to aid your presentation.
  4. Keep it standards compliant.  The same “failing gracefully” principals apply to email that apply to browsers.  However, there’s the additional “standard” of making sure you have a text-only version of your email ready to fly along with the HTML-formatted version.

Finally, a note about content.  A rule that used to apply to physical newsletters is also applicable to email newsletters.  A friend of mine used to tell me that “A good newsletter can be read between the mailbox and the trashcan”.  Be brief in your email content and link frequently to expanded content on your website.  Enjoy!

UPDATE!  I’ve discovered that Outlook 2007 and Google’s Gmail don’t support floating and clearing.  This makes design using pure XHTML and CSS very painful.  I’ve got new post about this issue and my dismay here.

Blogiculum Vitae

Monday, November 3rd, 2008

Sometimes it’s good to just stand back and marvel at where you’re at in life.  My family and I recently moved to Kansas.  While there was a variety of stimuli behind the move, it simply became obvious that this is where God wanted us to be.  And wow, what a trip.

I’m now a web developer whose company sits on what used to be a world war 2 era naval air base, and which also happens be on the edge of a century-old Amish community.  So as I drive to work I pass horse-drawn carriages, miscellaneous tractors, or tiny little buggies pulled by a couple of Shetland ponies filled with boys on their way to school.  Then I come across the old naval base’s radar towers and barracks and park about 1500 feet away from the old control tower which once oversaw the operations of four 7000 foot airstrips.  Then I go to my desk, sit in front of a monstrously powerful Mac, and spin electrons into the one of the worlds newest and most pervasive forms of communication.  How cool.

(more…)