In the past couple of months, I have been thinking about redesigning the Mason Law web site. One of the things I would like to accomplish is to clean up all of the menu items. One of the approaches I wanted to explore is having one menu button that would launch the entire navigation system. As I started to look around, Disney is doing it. The problem is that the menu system is not implemented across all of Disney sites. The bigger issue, though, is that the launch nav disappeared with JavaScript turned off.

The new Teehan+Lax site also taking the same approach and having the same no JS issue. Even with the JavaScript turned on, I started to get annoyed rather quickly that I have to make that extra click every time I want to go to another section of the site.

Accessibility wise, the JavaScript dependency is not going to work for a higher educational web site. Design wise, it is not going to get pass my superior. I am actually reworking the homepage to include more links. It is getting way overwhelming. So now I am going to need to figure out a different solution.

This site’s homepage is now sporting a slideshow that uses only scalable vector graphics (SVG). The benefit of SVG is obviously the small file size and scalability. My goal is to focus on color and typography for the slideshow to jazz up the homepage as well as to show off client works. I also would like to play around with SVG because I am loving Adobe Illustrator.

After doing my research on how to best use SVG, I decided to support only modern browsers. That way I don’t have to create a PNG fallback for all the graphics. I am all about doing less work, not more. Since this is an enhancement feature, it is ok if legacy browsers don’t get it. Users can still access the blog. I have a dilemma about this whole approach. I am not sure if users on IE and below are lucky that they don’t have to these big graphics or users on modern browsers are being punished with these rich visual. I don’t know.

On the technical side, the slideshow is based off Nivo Slider, the jQuery version. After testing out many sliders, I find Nivo to be the simplest. I also purchased the WordPress plug-in license for a client, but than he decided not to use it so I implemented on the Lancaster Education Foundation.

The WordPress plug-in is very easy to set up, but my main issue is that the plug-in injects quite a bit of unnecessary JavaScripts and CSS into the page. On the other hand, the jQuery version is highly customizable. I was battling if I should use the WordPress plug-in or jQuery for the client and I decided on the former. The main reason is that the client can update the slider herself. As for my own site, I do the updates manually; therefore, I chose the jQuery version, which is free.

For the second project of my Advanced Web Design class, I am going to build a simple web app that target jazz aficionados, fans or anyone who appreciates jazz music. The concept is to challenge the player to see if he could recognize a tune in ten second.

The functionality is straightforward. A player taps on the clip to play the music than guesses the name of the tune and who played it. Then he could tap on the answer button to check if his guess is correct. To play another tune, he simply taps on the button that would load up another clip. The game could also be played more than one player. Everyone can make his own guess.

Even though the class project only required a prototype, I am going to build out the app using jQuery Mobile framework. To make the app fun and easy to use, I am keep the interface very simple. There will only be three components: the audio clip, an answer button and a reload button. The audio clips will be loaded randomly; therefore; I would need a simple PHP script and text file to store the data. Another approach would be to use WordPress as a backend management, but that might be unnecessary for the purpose of this project. I am, however, considering developing this concept further and making it into an app that could be placed on Apple or Android app store.

As for the name, I am calling it “Jazzapp.”

Last night at Refresh DC event, some of the team members who are responsible for the redesign of USA Today online shared their design, development and implementation process. With the relaunch their goal is to set the industry-wide benchmark for online news. They moved completely away from the heavy-ad trend to focus on the users. They ditched web site and gear toward web app.

They went through many revisions to incorporate more video, media and gallery into the design. They wanted to offer a much richer experience for the users, especially for tablet readers. The relaunch was striking in design, but facing negative criticisms. The users who come to USA Today don’t want rich media, gallery or large photos. They just want to read the content. The team is now working on the next release to focus on creating a true reading experience.

Some of the front-end technical challenges they presented were also useful. I am a bit surprised that they are not using any preprocessor to manage CSS. Given that they are using many new elements of CSS3 animation, a preprocessor would help them tremendously with just vendor prefixes. One of the reasons they stay away from using preprocessor was that they don’t want to produce too much nested selectors. I disagree completely because they don’t have to create nested selectors if they don’t want to. A preprocessor like Sass doesn’t make them do anything they don’t want to.

Aaron Gilbreath writes:

[T]he more I listened to Davis’s music, the more his approach started to influence my writing style. His solos in “Diane” and “It Could Happen to You” show how measured, uncluttered phrasing increases rather than decreases the impact. Unlike so much fat-cat prose, Davis’s solos didn’t divert from their emotional center by wowing the audience with speed and facility. With less distraction, the force of his music landed more squarely on me.

While Gilbreath writes with Miles, I design with Miles.

My current title at George Mason School of Law is web services developer. I am responsible for server administration and web design and development. I redesigned the main Law web site and made it responsive.

Outside of my fulltime work, I offers full web services including visual design (brand and layout), front-end development (HTML5, CSS3 and JavaScript) and content management system customization (WordPress and MODX). My recent projects include Black Bag, Poplar Springs and GWbusiness.

As for personal work, Visualgui is my design playground as well as writing archive. Simplexpression is an online jewelry store I work together with my wife. She makes all the art piece. I am just in charged of the web site. Even though I don’t work with Flash anymore, an archive of my slideshows are still available for prosperity. Another personal project of mine is Sketches of Miles. The site was created when I needed a project to learn CSS3 web typography. Each page has its own art direction. Eventually I want to build this site further for my final project for the completion of my MA in Graphic Design.

Speaking of graduate school work, I made a landing page for Real World Design, a collaborative project with my graduate classmates in my last seminar class. I also created a few printed materials for my Advanced Typography class. Checkout the graphic section for details.

That’s just a quick presentation of my work for my seminar class.

I started learning Sass a while back but it never caught on. Not that the process is intimidating, but over the years I have developed a practice of keeping my CSS as simplified as possible. I wanted to see everything on one page and combine or eliminate repeated elements as much as I could.

I could continue to work with straight CSS, but Sass is gaining so much ground in the CSS pre-processor world that it is hard to ignore. Even Dan Cederholm is converted and I was going to wait for his book, Sass for Web Designers, to pick up Sass again, but I just wanted to dive in again.

Yesterday I spent a couple of hours converting this site CSS into SCSS. Panic 2’s native support with color code makes working in Sass easy. The set up through command line is a breeze. Import is a very handy feature to keep SCSS clean. It helps me make updates to the latest version of HTML5 Boilerplate. I still have much more to learn in Sass, but I am now converted as well.

Two new podcasts added to my listening list: “Design Matters” with Debbie Millman and “Unfinished Business” with Andy Clarke and Anna Debenham.

In “Design Matters,” Ms. Millman interviews top designers including Steve Heller, Erik Spiekermann and Khoi Vinh. Ms. Millman has a raspy, sultry voice for podcast and her questions are direct and intriguing. Apparently Ms. Millman have always done her homework before an interview. The episode with Erik Spiekermann is my favorite so far even though the German typographer uses quite a bit of flowery language. Eventually I’ll get to all of the episodes on “Design Matters,” but I am going through all the names that I am familiar with. Each piece runs about half an hour to 40 minutes with no sponsor, which is a nice, uninterrupted listening experience. Podcasting is no easy task and I completely understand that sponsors help paid for the hard work, but they do get a bit annoying, especially when an episode has three sponsors.

“Unfinished Business” is a new podcast (only three episodes so far) on the business side of design. I really appreciate the honesty Andy and Anna shared on how they price their works. They help me to rethink about own business practice, which, I must admit, I am not very good at. The good thing is that it’s never too late to learn. Right now I don’t rely on freelance as my main source of income; therefore, I still have the luxury of picking and choosing the clients I would like to work with. Mad kudos to Andy and Anna.

One of the criticisms of responsive design I have heard repeatedly is that it only works on simple web sites and that many responsive layouts have moved to a one-column. For someone who appreciates minimalism, I am very glad to see the marriage between simple design and responsive layout.

When I first got into the game, the web was extremely busy: animated gifs, background with repeated tiles, Flash intro and loud audio. I was overwhelmed with the trend and needed something simpler. As a result, I focused more on simplicity. Catharine Fishel’s Minimal Graphics: The Powerful New Look of Graphic Design was the first book that opened up my world to simple design. There was something about the focus on the main subject of a design that attracted me. When I started doing freelance work, simple design was something that I pitched to clients and they all liked it.

Responsive design makes perfect sense to me when I started two years ago because it allows me to focus on the content. My practice of doing simple design prepared me for the transition. Now that I see more and more sites are becoming simpler. Maybe responsive design has forced designers to focus more on the contents and that is all good for the web.

I started blogging in 2004 to improve my English and it has turned into my longest hobby yet. Somehow the ability to write anything and publish immediately have been so gratifying to me. I spent an incredible amount of time, energy and gut feelings on this blog. For nine years, I always feel the urge to write about subjects that I am passionate about. Lately they have been mostly about my kids.

While many have moved to social networks like Facebook and Twitter, I still prefer having my own blog. At the end of the day, the blog is more of what I am identified with. I have complete control of every aspect of the site and every design decision. I probably feel different if I am not a web designer, but this is my territory.

Late last year a friend and a reader asked me why I disbanded the comment section and I gave him several reasons:

1. Spams were simply a pain to deal with.
2. I constantly got suck into checking for new comments.
3. I always felt obligated to response to comments, especially the negative ones.
4. Comment trolls were also pain to deal with.
5. Conversations had moved to social networks.

Without the comment section my traffic has dropped tremendously, but then it also allow me to be more focused. Initially, I was just going to shut down the comment section for a month to see how things went and it turned well so I haven’t turned it back on.

So yes I’ll continue to blog or find time to blog as long as I still maintain this site.