I Love Ngoc Lan Redesigned

My initial intention for I Love Ngoc Lan was to bring the markups and CSS up to date and to make the layout responsive, but then I ended up with a redesign. The new layout has only one column because I wanted to focus on readability. Once users get past the homepage, which features a large banner, everything else is just clean text. The navigation has moved to the bottom instead on the right column to put the emphasis on readability.

The new design is responsive with mobile-first approach. The markup is based on HTML5 Boilerplate and dashes of CSS3 fanciness. I Love Ngoc Lan had been powered by WordPress since 2003. At the time, I didn’t know how the site would turned out and I used WordPress simply because it was the easiest solution. Now the site has grown into a very nice community and I am so glad that I picked WordPress. It has proven to be the perfect choice.

Mason Law Student Organizations Powered By WordPress’s Multisite

When I met with a student to discuss about moving his organization web site into an open source content management system, I suggested WordPress and his face lit up. He was glad that he didn’t have to work with Drupal anymore. My predecessor set him up with a Drupal 6 installation for him to experiment with and yet he still has not quite learned how to create a simple Drupal theme.

My first approach was to intall WordPress on our server and then to provide him administration access to create the site himself, but then what happen if other student organizations, which scattered all over George Mason servers and some hosted themselves, would like to come on board? I would have to create individual WordPress. That didn’t sound like a scalable plan so I decided to experiment with WordPress’s multisite. It turns out to be a great solution and this is my first time using multisite feature.

Now I only have to maintain one installation of WordPress and creating new sites is just a clicks away. One of the advantages of using multisite is that the students can create their own design if they want to, but I have to install the theme. That way I can check the codes to make sure they are safe and secured.

I created a default theme, which is a child theme of WordPress’s Twenty Eleven, for the student organization main site. The students can use it just as it like this one or they can come up with their own theme.

I am also in the process of creating another network of sites just for the faculty so they can update the content themselves without having to know HTML. Multisite is another reason WordPress rocks!

Renew Body Contour

Our previous client who we worked together on United Green Solutions returns to us for a small site design to advertise his new business: Renew Body Contour. Even though the site only has a few pages, we didn’t take the shortcut because we value every customer’s project.

We made sure that the site is fully developed and functioned properly on all devices. Since the site will also be used as a landing page for ads, we want the site to be optimized for mobile phones and tablets. We made the design responsive using HTML5 and CSS3. We also used HTML5 Boilerplate and customized Modernizr for backward compatibility.

Mason Law Gets Responsive Makeover

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.

WordPress Development for ASM-AETNA Blog

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 Site For Jennifer Karin

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.

Dedicated to Đán

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!

Admissions Office Intranet

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.

Theatre Arts Workshop

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.

Go the Fuck to Sleep

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.