Creative Freedom Takes No Shortcut

In choosing a CMS for a client project, I was debating between WordPress and MODX. These two systems could do what I need for the site; therefore, my selection was based on flexibility (for me to develop) and usability (for the client to maintain).

WordPress would have been an easier choice since I have worked with the system for quite a while. WordPress would have taken less time to implement because I could use a starter theme and run with it. WordPress’s admin interface is very easy to use. It would take me less time train the client to use the system. The most impressive part about WordPress yet is the ability to upgrade the system with just one click. Client won’t need me to do anything in the future.

MODX Revolution, on the other hand, would be a bit of a challenge for me. I have not implemented a site from scratch with MODX; therefore, it would take me much more time to develop. In addition, MODX has no existing template to get me running. Everything has to be built from scratch and the biggest advantage of this is that I can create the site exactly the way I wanted. There’s no shortcut to get me started, but the end result would be quite satisfying for someone who likes clean codes and semantic markups. One can argue that you can start WordPress from scratch as well, but getting all the functionalities back in takes much more time. As a CMS, MODX’s template variable allows me to create any piece of content anywhere on the site. Now that’s truly flexible. In contrast to WordPress, MODX’s manager is not as easy for client to use. Training will be required. Upgrading the system would require my involvement.

After careful consideration and discussion with my client, we decided to go with MODX. It is a perfect opportunity for me to learn the system. With the reference of Bob Ray’s MODX: The Official Guide and online documentations, I am quite impressed with MODX Revolution. Its power allows me to create a dynamic, CMS-driven web site just the way I wanted no more no less.

I’ll share the site once we launch it. Stay tuned!

Hiding Blocks of Media Queries in IE8, 7 & 6?

For this site and Mason Law, I dropped the dependency of respond.js for IE8, 7 and 6. Since supporting these legacy browsers isn’t necessary, I used conditional comment to server a style sheet specifically for IE8 and below. The IE-specific CSS is the same as the blocks of media queries from the main CSS, but without the media queries.

The solution is not perfect because IE8 and below would have to download two CSS files, but it is still better than depending on respond.js. A more ideal approach would be to hide @media blocks from legacy browsers within the main stylesheet. I have been searching all over, but haven’t been able to find a hack for that. Does anyone know how to hide blocks of media queries in IE8, 7 & 6?

Mobile Third

When it comes to responsive web design, most experts suggest mobile first. As a designer, I am having a hard time visualizing the layout with the content-out approach, especially for large, complex sites.

I am in the the process of redesigning George Mason Law site and facing a few challenges. The new design has to work with and response to the existing contents, which being added and updated through MODX. The navigation and the drop-down menus need to stay intact. If I started out with just the structure, the menus would get in the way and the image slideshow has to be left out as well. I simply can’t see how the site look from the bottom to the top, particularly if I wanted to design the layout on the grid.

I began the design based a 960 grid. I drop in the slideshow, which will be handled by responsive image approach later, and style the page as closed to the finish site on a large screen. The next step is to save a copy of the stylesheet and create a blank one. I am using HTML5 Boilerplate; therefore, I just need to remove the primary styles.

Now I am back with a bare bone design then I worked on the print stylesheet second to get it out of the way. With two stylesheets side by side, I just cut and paste from the finished file to the new file as I see fit beginning from 320px and up.

One of the advantages of starting small first is that I don’t have to declare the max width. Even though I started out with 960px, I could go up further if I wanted to and the layout will response properly. I know it is a big extra step that I took, but it really does help me see the picture. Do designers feel the same way or is it just me?

Digging ModX Revolution

Over the weekend I stood up wordPress, Drupal and ModX on my laptop using MAMP while sitting by mom’s hospital bed. The installation process for each system took less than five minutes. WordPress’s default theme is Twenty Eleven. Drupal’s default theme is Bartik. ModX’s default theme is blank.

ModX claims to give the designers total creative freedom. As stated on its web site:

Ever wanted complete freedom with your HTML and CSS? Tired of hacking existing systems to get your design to work the way you comp’ed it? MODx does not generate one single line of HTML – it leaves the front-end design up to you.

After reading through the documents. I am very impressed with the way ModX handling the template. The designers do indeed control all the HTML, CSS and jQuery and ModX’s placeholders handle all of the dynamic codes. This is the biggest different between ModX vs. Drupal and WordPress. With Drupal and WordPress, a designer would need a base theme to begin. Creating a customized theme from scratch for WordPress and Drupal takes tremendous amount of time and when it is time to upgrade, a designer has to also upgrade the theme. The nice thing about WordPress is that the theme would still work without upgrading. The designer just won’t be able to take advantage of the new functionalities.

What makes ModX an ideal CMS solution is the template variable, which is a custom field. A site can have as many custom field as it is required. This is one of the areas that ModX is stronger than WordPress.

With all that said, I haven’t built anything with ModX. I need a simple project to get it rolling, but I can’t think of any at the moment. A client site would be a great project for ModX.

Playing With ModX

In my new job I inherited three different content management systems. I know WordPress and familiar with Drupal, but ModX is fairly new to me. The main site is running on ModX, which set up three years ago by my predecessor’s predecessor. I had done some reading on ModX as well playing around a bit with the current site, which runs on the older version of ModX.

I am quite impressed with ModX’s flexibility, template design in particular. Like Drupal and WordPress, ModX is based on PHP and MySQL. Unlike Drupal, ModX is very friendly for designer. A designer can create the entire static HTML site and only need to add in ModX snippets where dynamic contents required. The snippets are ModX’s own code so you can’t mix in HTML with PHP; therefore, the HTML codes could be quite clean and minimal.

With the school’s particular site, however, the previous’s previous developer customized the core and database to create functions that ModX didn’t have at the time. The downside is that upgrading ModX will be a huge challange.

Back to Basic

The “sites” section is the most important part of Visualgui in showcasing work to potential clients. I like to keep it just to one page so client can see example of my projects without having to click around. The problem is that the screenshots are huge and the number of projects keep on growing. The two biggest issues are scrolling and loading. So I spent the last few nights researching and figuring out the best solution to solve the problem.

I experimented with two methods: lazy load and infinite scroll. I really like the method of lazy load because I can still keep everything on one page and only load up images the user see. Unfortunately, lazy load is not working the way it should. In Safari, the images are being loaded even though they don’t show up until users get to them.

Infinite scroll, on the other hand, requires breaking down several pages, which I don’t mind much. The biggest drawback is the break of the back button. Once user clicks on a link, they cannot go back to where they were on. The loading of further down contents seems to be very disorienting.

After getting them to work, I was not pleased with the end result; therefore, I didn’t use neither one. I went back to the basic approach of adding a second page. So the first page shows the last 10 projects and the second page shows all of the older projects. So that’s the temporary solution until I could find a better approach.

Where I Found Inspirations

Last Saturday, I took Dao to Barnes & Noble so he could play at the train table. While watching him, I picked up some graphic design books and flipped through them. It’s been a while since I get a chance to do that.

Back when I was working at Vassar, I often turned toward the graphic design section in the bookstore to find my inspiration. After meeting with the client to get his vision for the web site, I would sneak out to the book store to see if I could get some concepts and ideas for the layout. One of the nice things about Vassar was that we were encouraged to hone our skills in whatever way we desired. So sneaking out to the bookstore to do work was perfectly fine.

When I searched for inspiration, all I needed was a notepad and a pencil to do my sketches. I don’t want to design with the design book next to me. I might end up making something close to the original design unconsciously. Looking back at some of the sites I had done, I could still remember how I came up with these designs: German Studies, Jewish Studies and Dean of Freshmen.

Internet Life

What if the Web goes away tomorrow? What will I do? The Internet doesn’t just play a big part of my life. It is a big part of my life. I make a living off it and I spend more than half of my days on it. I interact with more people online than offline. I met my wife through the Internet. Actually, she found me through the Internet (conceited I know). I met a few great friends online. I wrote to big bro HmL the other day mentioning how wonderful it is to have met him through the Internet and his response was, “In this day and age, it’s not how we meet; it’s that we meet, no?” True that, true that.

Someone once said to me that I blog to gain popularity. If that is the case, now it’s the time to prove that person is wrong. Based on the number of comments nowadays, this blog is not doing its job to boost popularity, but I am still blogging. I still like the ability to just write things down. It’s cool if people could charm in, but it is also cool if they just read or not. This is the digital part of my life even though it is not an exciting one.

So what happen if my digital life is taken away tomorrow? Will I survive? Of course I will. I have to do whatever necessary to support my family. I am sure my creative mind will come up with something when the time comes. For now, let’s just enjoy the wonderful life the Internet have to offer.

Vietnamese Website Designers with Tourists, Kites in Mind

Tu Ngan Ka writes in Thanh Nien:

In 2006, Donny set up a [slideshow] where people can enjoy beautiful images of Vietnam and a lovely song called “Bonjour Vietnam” written by French songwriter Marc Lavoine and performed by Pham Quynh Anh, a Vietnamese Belgian.

Donny completed a course in digital arts and multimedia design in 2001 at La Salle University in Philadelphia in the US. He is now working at Vassar College in New York.

Designing websites allows him to work and improve his creativity.

Passionate about designing websites and fond of folk songs about Vietnamese villages, he set up visualgui.com in the hope of sharing his knowledge of website design as well as reviews of Vietnamese songs written in Vietnam and abroad.

“Bonjour Vietnam” is just one of the slideshows that Donny has compiled.

He’s amazed how popular his sites are amongst young people.

“Perhaps, we have a shared idea and deep love for Vietnam,” he said. “It is a process of sharing.”

Aesthetic Experience

Why it is so hard to look at the work of art itself and for once not injecting in your personal opinion? Focus on the aesthetic experience instead of practical experience. While many Americans find “A Few Gift For My Homeland” inspiring, some of my own Vietnamese folks find it disgracing. They claim it brings back horrible memories and gives a bad impression for Ngoc Lan as a performer. I just don’t get it. Why can’t people just listen to the voice, watch the motion, enjoy the music, and leave their opinions behind?

The same reaction with Piss Christ by Andres Serrano, why can’t viewers just look at the aesthetic quality and not to worried how it was created? Same thing goes with Eminem. People attacked his lyrics because he offended homosexuality and the way he talks about his mother. Why can’t we leave all that behind and just enjoy his flowing skills and the dope beats? Don’t worry about the artist intention and just concentrate on the aesthetic experience of the work.

I am just hoping that viewers enjoy “A Few Gifts For My Homeland” as a work of art and not to get offended by it. Anyway, if you would like to learn more about aesthetic experience, here is an interesting essay! Now, if you are too excited about aesthetic experience and really want to learn it, I highly recommend Aesthetics: Problems in the Philosophy of Criticism by Monroe C. Beardsley.