As a father of a two year-old, I sure got a kick out of Adam Mansbach’s Go the Fuck to Sleep. I could hear the voice in my head saying, “Please close your eyes and go the fuck to sleep. I got other shit to do.” Putting Dao to bed has always been a challenge for me. He kept wanting to play until he gets tired out. Usually I fell asleep before him.

As I was listening to Samuel L. Jackson narrating the book, I couldn’t help firing up Flash and create some animation. I haven’t touch Flash for a while; therefore, it is a perfect little project to brush up my chops. With this piece, I just wanted to play around with simple typography in motion. So check it out. It’s time for me to go the fuck to sleep as well.

The spring edition of GWbusiness magazine is now online. In addition to new contents, the layout has been realigned to be responsive. GWbusiness went online over a year ago. At the time, I was just getting into HTML5; therefore, some of the elements needed to be updated. I also changed Georgia to Quattrocento for the headers and Quattrocento Sans for the body type.

Thanks to my colleague Molly for the encouragement.

I am pleased to announce the new launch of Jen Karin Writes, a blog for an award-winning writer and imagination advocate. Ms. Karin approached me right after Writerhead went live. Big props to Ms. Bair O’keeffe for the referral.

With Jen Karin Writes, I was presented with a challenge: a very close-crop portrait of the writer. Meg Silliker of Bluelime Photography has done a great job of capturing a natural smile from the writer, but the vertical portrait is difficult to work with for the web.

To make the layout work, I anchored the photo to the left in a fixed position (no scroll) and let the contents flow next to it. The photo is served as a starting point for building small layout first. I used 320 and Up along with HTML5 Boilerplate and WordPress’s Toolbox as a framework. I also referred to Tim Brown‘s Modular Scale for headings.

Many thanks to Jen Karin who is such a fantastic client for giving me the full creative freedom to put the site together. I am very proud of Jen Karin Writes and hope that she’ll enjoy using it as much as I had enjoyed crafting it.

I am pleased to announce the new launch of Writerhead …with Kristin Bair O’keeffe. This is the second project I get to work with Kristin, the talented writer. Two years ago I created a web site for Kristin’s first novel Thirsty and we both were very happy with the project. So when she approached me to turn her static site into a vibrant, dynamic blog, I didn’t hesitate.

Before I even gave Kristin an estimate, she already had all the contents ready for me. I wish all my projects could begin this way. Kristin also knew exactly what she wanted: simple but bold. As you can see from the site, you can’t get any bolder than a big, bold persimmon masthead with an incredible amount of text. My first instinct was that it’s too much text for a site description, but then I didn’t want to take it out after I see the playfulness of it. That’s what making the site stands out.

Kristin wants the ability to update the entire site herself; therefore, WordPress is the perfect tool for this project. The theme is based on “Toolbox: An HTML5 WordPress Starter Theme.” The theme is styled with semantic HTML5, but I modified the codes a bit to incorporate HTML5 Boilerplate. I tried to stay closed to “Toolbox”‘s structure as much as I can so Kristin can add new widgets or create new menu item without me going into the codes. I relied mostly on CSS to jazz up the look and feel. I also used CSS media queries to make the layout responsive. CSS3, HTML5 and WordPress make me love what I do.

Writerhead is truly a rewarding project to me. Even though I digged into these new technologies with Visualgui.com, Writerhead allows me to see WordPress really works. With Visualgui.com, I customized almost everything so it is very specific for my own needs, but Writerhead is much more flexible since I have to design with other users in mind.

So thanks Kristin for the opportunity. I hope you’ll enjoy using the site as much as I have enjoyed designed and developed it.

By the way, Kristin will open a personal essay workshop online. So if you’re interested in improving your writing skills, check out her classes.

After many months of itching for a new design, I spent the last four sleepless nights realigning instead of redesigning my personal site. My original intention was to revamp both the design and the codes, but I simply can’t escape the white background. Although the layout isn’t drastically different, I incorporated many new things I have learned in the past few months. So let’s walk through some highlights.

The navigation is completely reworked. As you might have already noticed, the inspiration comes straight from Apple.com. What can I say? I am a fan of Apple’s design. I can’t be a sleek as Apple so I settled for more colorful.

The layout is now much wider (940px). The design is based on a grid that inspired by Khoi Vinh’s Ordering Disorder: Grid Principles for Web Design. Until I read his book, most of my previous designs based on improvised grid. Although the previous design worked out well with 800px, it’s time to move on toward larger screen; however, the new layout is also responsive and fits nicely with mobile devices. Big up to Ethan Marcotte for the invaluable tutorial on fluid layout from Dan Cederholm’s Handcrafted CSS: More Bulletproof Web Design.

HTML had been rewritten after many rereads of Jeremy Keith’s HTML5 for Web Designers. This site also uses some features from the rock-solid HTML5 Boilerplate. Paul Irish rocks!.

A big part of this redesign was for me to go through WordPress 3.0 and create a framework just in case my feature clients would like to use WordPress as a CMS. I wanted Visualgui to be a parent theme and than later on I can just build a child theme to meet whatever design the clients request. That way, I’ll have a based template to start off with. Thord Daniel Hedengren’s Smashing WordPress Themes: Making WordPress Beautiful is a great resource. I went through WordPress’s default theme Twenty Ten line by line and tried to convert it into HTML5 markups. I was half way through before I discovered ToolBox. That was exactly what I needed. So I went back to use Toolbox as a reference to build out a framework. For the purpose of this site however, I only use some basic functions.

As for typography, I am finally moving away from Helvetica, a font that works so well in term of clarity and supporting Vietnamese characters. The latter has been the reason I have been holding on to Helvetica for so long even my printed material was set in Helvetica. I am now switching to Cabin for the branding and headlines. I guess it’s time to print some new business cards to be consistent. For body text, I went for Goudy Bookletter 1911, my favorite classic typeface.

For CSS, I am playing with multi-column, which splits my blog posts into two columns. The new element doesn’t work on all browsers, but it doesn’t hurt. So yeah, that’s it for now. I am sure there are still tons of touchups need to be done. The screenshots on the sites and motion section need to be be resize. I’ll do that later. It’s time to catch some sleep. Work starts in a couple of hours.

We are proud to present the launch of United Green Solutions, an alternative energy and general contracting company that provides turnkey solar electric and lighting projects for commercial customers. UGS needed a clean, fresh and simple web site that conveys its forward-thinking in the pursuit of global sustainability. To promote the firm’s expertise in creating alternative energy efficient solutions, we worked closely with UGS team to craft informative, inviting design using HTML5 and CSS3.

A brand new site with a brand new product line. After many months on the back burner, Simplexpression gets a complete renovation just in time for the fall.

For the site redesign, we replaced the simple white design with a muted tone. The new homepage displays all the thumbnails that will float according to the user’s screen resolution. We also revamped the codes to bring the site up to HTML5.

For our product, we took down all the old pieces and changed the way we photograph our new pieces. We abandoned the concept of naming our pieces after female jazz singers because choosing a name to attach to a piece has become quite a challenging task.

So head over and check out the new site. I hope you like our new approach and spread the love.

Just launched a new web site for one of my longest clients: The Lancaster Foundation for Educational Enrichment. I designed the original site eight years ago and have been maintaining it since. The new executive director wanted a brand new site that is clean, simple and attractive. So I worked with her and her team to rebuilt the site from scratch. The new site is marked up using HTML5 and the content has been rewritten.

I finally got around to install WordPress for the School of Business to replace the good old handcrafted newsletter. I no longer have to spend time hand-coding each newsletter. My colleague who writes the content of the newsletter could just post as she go along. One of the advantages is that we don’t have to wait for two weeks to send out the hot news. It will be more immediate. I also don’t have to feel guilty spamming 25,000 people every two weeks. They can just subscribe to our RSS feed and read as they pleased.

I installed the latest version of WordPress, which is 3.0, and tried to theme it based on Twenty Ten, the new default template for WordPress, but the new theme is way too complicated. Furthermore, the new template from GW isn’t so simple either. To get the two to work together will take tremendous amount of time or at a week straight to breakdown the PHP. So I went back to the classic theme, which is the most straightforward out of the box. Even with the classic theme, I had to strip the code down to its core for my needs and trim away the extras. Twenty Ten has 26 files and two folders. My theme only has three files (index, comment and css).

What is up with the long URL? When I thought about the project, I couldn’t find an appropriate name for it. I brought it up at our communication meeting and asked my colleague to help come up with a name. We tossed out a few ideas, but then it hit me: atthecenterofitall.business.gwu.edu. My boss was immediately sold on it even though it’s damn long address. She defended the idea by retelling the story about one of our alumni. In an executive meeting somewhere in another country (I can’t remember the name), he introduced himself as a graduate from GW School of Business and one of the directors at the table complimented, “At the center of it all.” Furthermore, We had done quite a bit of promotion on that catchy phrase. So I thought it’s a great marketing strategy and I was so glad that my boss was with it. I still love saying it: at the center of it all dot business dot gwu dot edu. How awesome is that?

I just launched Sketches of Miles, an experimental project combining Miles Davis’s albums and web typography. The concept is to design each individual poster-style page based on Mile’s cover art. To make the project more interesting, I also write a Twitter-style, one-sentence review and each piece has to include the title of the album.

What inspired the project? After purchasing Miles Davis’s The Complete Columbia Album Collection a few weeks ago, I am still trying to get through more than 70 CDs with every chance I get. I listen to Miles at work, on the train and on road trips. One night, I just drove Dana and Duke around DC just so I could get through an album. The problem is that I can’t soak in everything that fast. The only way for me to pay close attention to an album is when I want to write something about it, but I can’t review all 52 albums. I could if I don’t have to take care of Duke. Being a parent changes my priority.

So if I could listen to the entire album and sum it up in one sentence, it would force me to be more focused. Sure, I can just post a quick sentence on Twitter, but I don’t want to be lost in the Twitter world. I want to make simple project and learn something out of it. I have been wanting to play around with web typography as well as crafting each page with a unique design.

A couple months ago, I came across an article from David DeSandro about Stacey, a lightweight content management system and how he uses her to create each individual entry. Stacey is simple and very different from a traditional blog system like WordPress. I downloaded Stacey and was impressed by her simplicity, but I couldn’t do anything beyond the default template. I needed a real project to get a hang of it. So I stripped the system down even further to do what I wanted to do. I got stuck and contacted David for assistance. He replied the next day and even showed me the source to his entire site. I was in awed. Mad props go out to David.

Since this is a personal project, I could careless if the site works across all browsers. Safari is the only one I test it on. There are no reset CSS, no layouts and no clear fixes. The site is a very basic HTML5 markup with very little use of CSS. All fonts are real (no images). I am currently using some from Google Font Directory as well as the safe fonts beyond the Helvetica. I’ll try to look out for more free fonts to link to.

So I hope you enjoy this tiny project. I am not sure how often I will update this site, but you could pick up the RSS to be notified whenever a new piece is up.