Back in 2004 when I set out to learn WordPress, I created a custom theme for Visualgui from scratch. I took WordPress’s classic theme, ripped apart and kept only the codes I needed for my site. I had total control of my markups and I knew exactly what to expect when WordPress processed my codes. I also decided very early on that my blog posts would only contain texts and nothing else (no images, no embedded video, audio or JavaScripts).

What still amazes me about WordPress is that the custom theme still works today. The markups had changed dramatically over the years from XHTML to HTML5, but the underneath structure remains the same. Another indisputable feature of WordPress is the one-click upgrade. My site has never been broken when I make the upgrade. I even tell all my clients with confidence to just click that button.

The downside of WordPress is that it takes a lot of work to build from scratch, especially if you don’t know exactly what functionalities will be used in the future. Take this site for example, I have no functionality for widgets because I don’t need them. My clients, however, would need those types of feature to be able to add extra things to their site.

A better approach would be to take pre-existing templates like The _s Theme, Toolbox or Twenty Eleven and customize them for your needs. The drawback is that you’re losing precise control of your markups and many functionalities that came with those themes you might not need. Working from complexity to simplicity is where WordPress is similar to Drupal. The different is that WordPress’s default markup doesn’t make Zeldman cries. In this regard, MODX shines because it gives you total freedom to write your markups.

I am working on a client site using the latest version of MODX and I couldn’t agree more with the president and co-founder of MODX Ryan Thrash on “Remarkable Results, No Coding Required:”

We have always believed that the software that runs your website shouldn’t dictate its structure or force you to compromise your design to fit its mandatory theme layer. On the other hand, it should adapt to your explicit needs, today or tomorrow, and it should never force you to work with code in order to create a truly custom design.

That is the reason I picked MODX and am so excited about its flexibility.

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!

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?

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?

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.

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.

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.

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.

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.