I am pleased to announce the new, improved Mason Law web site. This is not a complete redesign, but a realign. All contents are the same, but the layout is simplified. Many drop-shadow elements have been removed in favor of a modern, streamlined look and feel. The logo is now anchored in the center and the menus are reorganized for clearer navigation. The slideshow on the homepage was replaced with FlexSlider for faster, flexible performance.

Markup is rewritten in HTML5 based on the Boilerplate. CSS is rewritten from scratch for optimzation and to take advantages of the new CSS3 features. The site is still running on MODx, an open source Content Management System and Application Framework. Because of MODx’s flexibility, the switchover from previous to new templates was rather smooth.

The most challenging yet fun part about this project is making the design responsive from content out. I had written about my process, approach and reason for making Mobile third and not first. Working on this site has been a rewarding experience for me. I got a chance learn MODx and put my skills to good use. For three months into the new job, this is a great start.

Introducing a blog for Ambulance Service of Manchester (ASM) and Aetna. My role for the project was to implement WordPress. I worked with the graphic designer who brought me into the project to turn her design into the blog. I worked directly with the client to create all the requested functionalities. I also provided training on using WordPress to its full potential. The project was a nice collaborative experience, in which I didn’t wear my design hat.

Thanks to Ms. Kristin Bair O’Keeffe for the referral.

New year starts out with a brand new site. I am very exciting to relaunch a small-but-fun professional web site for Jennifer Karin. The new site highlights Ms. Karin’s creative boxes that are “filled with books, awards, and accomplishments.”

Having worked with Ms. Karin in the past on her blog, I am delighted to have another opportunity to rework her web site. She has once again given me full creative freedom to shape the design. As a communications expert with over 25 years experience, Ms. Karin knows the important of clear and concise content. Before we even settled on the agreement, Ms. Karin already sent over all the contents. Comparing the new copies to the ones on the previous site, she cut the texts down to its essential.

After reading the contents, I know that the site needs to be simple, attractive and readable. The boxes she used in her writing gave me the idea of using icon box for each of her profession. Alex Brush, an elegant script typeface, is used for the header as well as the background, which is also a typographic treatment of her initials. Furthermore, I wanted each page to have its own color scheme to showcase the distinctiveness in her area of expertise.

Behind the scene, the site is written in HTML5 and CSS3 with the help of the awesome HTML5 Boilerplate. Of course, the layout is responsive to be viewed on various tablets and mobile devices.

This project makes a perfect beginning for 2012. Let’s hope the new year will bring more fun and excited opportunities like this.

To celebrate Đán’s “đầy tháng” (full month), I put together a short slideshow as a special dedication to my second son.

Similar concept I used for my first son, Dao’s, this slideshow features black-and-white photos with a short jazz sampling. This time around, I used Stacey Kent’s rendition of “What the World Needs Now is Love” to support the images.

When I heard this song for the first time, which was a few months ago, I was going through some dramas. The world around me seemed to be very cold and lacked compassion and the song was just what I needed to lift me up. I also thought of my second unborn whenever I listened to the tune. What the world, at least my own world, needs now is a lovely boy and that’s how I selected the tune for this slideshow. It’s a perfect complement.

Happy full month my love!

One of the challanges of setting up the Admissions Office Intranet is that I had no content to work with. The Admissions Office needed a site that is limited to just incoming law students. My responsibility was to come up with the shell that would allow the staff to fill in the pages.

I had three choices of CMS. Drupal would be too complicated for the project. MODX was my selection, but designing an empty site from scatch was not an ideal solution. The effort was not worthwhile for a restricted site. I needed something that is well thought out to kick off with. WordPress is the perfect choice because its default theme, Twenty Eleven, had everything that is required. I just needed to jazz up the design a bit to comply with the school’s branding.

I decided to experiment with WordPress’s child theme based off Twenty Eleven and ended up loving the idea of customizing the design without touching the parent theme. With a bit of CSS knowledge, one can create a pretty decent site. The child theme turned out to be a perfect solution for this particular project. The site is obviously restricted, but you can still get a sneak peak of the homepage.

I am pleased to announce the new launch of Theatre Arts Workshop, “a professional performing arts teaching facility for students of all ages, ambitions & abilities.” This project is a collaborative effort between me and Ryan Dellolio, a very talented web developer who was a colleague at GW.

Ryan brought me in to do the design and front-end development. I worked with the client on the visual layout and created the HTML5 template as well as the responsive design. He took care of implementing WordPress and everything else. The partnership worked well and the client is very happy with the new site. I hope to get the opportunity to collaborate with him again in the future.

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.