A Blog Not Limited

to web design, standards & semantics

Introducing Emily Lewis Design

Oct 04, 2010

Published in

Ever since I decided to quit my job, creating a new site for my freelance business was at the top of my list. As days, weeks and months passed after giving my two-week's notice, other priorities popped up and paying the bills became paramount. My site, meanwhile, became the admonishing voice in my head reminding me that it's rather pathetic when a web designer doesn't have a site.

So when September started, I committed myself to getting a new site designed, developed and into ExpressionEngine. I put everything that didn't earn me money on hold. Naively, I didn't think it would take too long. My content was simple, my personal aesthetic tends toward minimal, and I'm a wiz with markup and CSS … two weeks, tops, I told myself.

Five weeks later, I'm relieved to say I'm 99.9% done … I give you Emily Lewis Design.

Emily Lewis Design thumbnail

Twice the Time

Why did it take me almost twice the time I expected to design and develop my site? Part of the extra time was coming up with some sort of "brand" for myself. And, frankly, I didn't even really do that. I made a logo, selected some typefaces and a color palette. Nowhere does that qualify as branding. Yet, it still took me forever to finalize those basics.

But most of the extra time spent can be chalked up to the fact that I'm my worst client.

I kept having new ideas. And I tried each and every idea, sometimes spending hours with an idea only to decide it wouldn't work out in the long run. Scope creep doesn't even begin to cover it.

And then I wanted to be fully creative and inspired … developing markup and CSS that I was never allowed to use in my corporate job. Sounds awesome (and it was), but it took more time to plan, research and implement.

I pretty much allowed myself to be that PITA client who keeps changing her mind about the colors and the content and the functionality.

I strayed from the process I use for every other client, and it screwed me. Lesson learned.

But Tons of Fun

Even though the process got fucked up along the way, I had so much fun with it. Between using HTML5 and some (relatively) advanced CSS, I was in geek heaven.

HTML5 (with a dash of WAI-ARIA) feeds my love of semantic markup. Being able to take my markup to a new level, making it even more semantic is better than chocolate and champagne. I also loved getting a better understanding of the outline algorithm.

And using CSS that I knew would bork in IE, was refreshing. I almost never had the option of ignoring IE in my former job, so it was a treat to use what I wanted and simply forget about IE.

I also experimented with @font-face, which was a useful learning experience and (almost) delivered what I wanted.

No Love for IE?

I originally planned on giving IE the finger and just ignoring it entirely. But then I considered who my clients and prospects are … many of them still use IE.

So I started waffling on my original intention and did a little hacking a la conditional comments. IE was getting acceptable, but I wasn't sure if acceptable was good enough.

I gave CSS3PIE a whirl. Fairly impressive. Not only did it take care of the little CSS properties like border-radius, but it also gave me transparent PNGs and advanced selector support.

I was quite happy until I realized the addition of PIE significantly increased page load time in IE, especially IE 6. And then it turns out PIE has some (as yet unidentified) conflict with jQuery tabs, which I'm using all over my site. On pages with jQuery tabs, PIE simply doesn't work. Period.

CSS3PIE went out the window and, to be honest, I'm still not sure what I'm going to do about IE. For now, the conditional CSS I threw at it is fine. But I don't like straddling the fence … I'd prefer to make up my mind and just go with whatever I decide. I've installed Google Analytics, so I'm going to keep an eye on browser stats and let that dictate direction.

OSes and Fonts

Another frustration with my site design was with the Mahalia font I used with @font-face. As it turns out, the line-height and size renders differently on PC browsers than Mac browsers.

So, where I'm using Mahalia for my <aside> headings, the vertical position differs from my intended design if you are on a PC browser. Granted, a small issue, but ridiculously annoying. And I hope one that I can eventually find an acceptable solution for.

Smooth Sailing With EE

The one simple and straightforward phase of my site development was ExpressionEngine. I've said it before, I'll say it again: the fact that EE lets me dictate my markup is the primary reason I love it.

Once I upgraded to EE 2.1 and installed Multiple Site Manager, I just dropped in my markup and got my custom fields set up, and everything worked as planned. Couldn't have been easier.

Well, I lied a little bit there … I did have some issues with displaying child categories for a single entry. I think the Child Categories add-on would do what I needed, except it isn't for EE 2. So, I hacked a solution and I'm going to pray the plugin gets upgraded.

99.9% Done

I do still have a few more things I'd like to address:

  • My CSS is a hot mess. I need to go back in, clean it up and optimize it.
  • I also want to mess around with media queries and the uber-trendy "responsive design."
  • I'm using sprites, but I suspect I could be using them a bit more efficiently. I need to revisit those.
  • As I mentioned, I need to get off the fence about IE. Whatever I decide will likely mean a bit more tweaking of something.
  • I haven't done all the user and accessibility testing I'd like to do, so more time needs to be spent there. I already know of a CSS change I need to make to my jQuery tabs.

Aside from those relatively minor issues, I'm satisfied. It is a solid site, and I learned a lot while creating it. Best of all, I can now return to focusing on projects that make me money.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!


Share the Love

Prajapati KV's Gravatar

Prajapati KV opines:


Congrats! Impressive design.

Kevin Dees's Gravatar

Kevin Dees opines:


Hey, congrats on the new site and great use of web fonts. Will be cool too see it responsive. I need to get on with finishing my site here soon.

Wish you the best in your new venture.

Toby's Gravatar

Toby opines:


I like it. Love the little mf’s and other rollovers in the left of page footer :)

Tiny little trivial constructivism: first thing I look at in source is line tabbing, haven’t got mine down pat either yet, but I always think it shows that extra jot of site TLC :)

Emily's Gravatar

Emily responds:


@Prajapati KV & @Kevin - Thanks so much, guys! Appreciate the compliments :)

@Toby - I do the same thing all the time. I definitely plan to go back and revisit the indentation ... a bit of a challenge as I’m using different combinations of EE embeds, global variables and snippets. I likely won’t be able to get everything as it should be, but it can definitely be better. Cheeers :)

Matt Andrews's Gravatar

Matt Andrews opines:


Beautiful work, Emily, congrats.

My only tiny niggle (which I’m sure you’re already aware of) is the way the top tab nav works with the old bugbear of all thinking webdesigners: CSS-on-with-images-off.  A rare real-world situation, perhaps; probably just the odd dialup or old-mobile user.

But anyway, great work.  The source will be happily stolen by thousands of designers interested in moving into html5, I’m sure :)

Matt Andrews's Gravatar

Matt Andrews opines:


Oh… and re PIE etc, did you consider Modernizr as an alternative/supplement to conditional-comments CSS for IE?

Oswald's Gravatar

Oswald opines:


Your Microformats book captured my attention so I borrowed it from library. Real awesome! I will buy it soon! Thumbs UP!!

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.


I Tweet, Therefore I Am

Follow @emilylewis on Twitter!