As of today Visualgui is no longer supporting legacy browsers, particularly Internet Explore 8 and below. The markups have been revised and to take advantage of the new HTML elements. Without providing support for older browsers the markups are much more simplified, but the main reason for the switching is to improve accessibility with ARIA roles.

After listening to Bruce Lawson talking about ARIA roles baked in HTML5 default elements on “The Web Ahead” (episode #74) with Jen Simmons, I was inspired to do my research on it. Even though I have already used ARIA roles a few years already, I have learned that I didn’t use them quite correctly. After some Googling, I found the documentation on “Using WAI-ARIA in HTML” from W3C to be very helpful, especially the recommendations table.

As much as I want to support legacy browsers, I ought to move forward. After all this is my personal site. It is a place that allowing me to experiment. So if you are using legacy browsers, I apologize that Visualgui might not render correctly. If you can, please consider upgrading your browser.

Another significant change is that the text on Visualgui is now powered by Typekit.

My go-to sans serif typeface is Andrian Frutiger’s Univers. Its family has grown to 44 different weights and styles. You can’t get any more versatile than that. For serif, my go-to typeface is Robert Slimbach’s Minion. It’s a vanilla text face that gets out of the way.

Vài phút nhìn lại:

• Giờ Này Anh Ở Đâu
• Một Chút Quà Cho Quê Hương
• Biển Nhớ

• Responsive web design still came up many times at the conference.
• Many libraries are using WordPress for their web site.
• For its web site redesign project, the UNC library team is consisted of 4 web developers and 20 plus content contributors.
• The MacEvan library contracted out $50,000 to build an iOS app.
• The Cornell team for its library project is consisted of 6 UX designers, 9 web developers and a handful of contributors

I wish we have a team or a budget like the libraries mentioned above.

Presentation from Shari Thurow at Computer in Library 2014

Searchers on mobile

• Quick fact
• Location
• Personal information

What searchers expect

Use elevator as an example to guide users.

Usability tips for labeling

• Don’t put prompt text in text form. Leave form empty. Put help text underneath
• Provide the right contexts
• A label must be representative of a page and section content on a web website
• Page title is important for findability. Lead with most important word
• Name your image with context. Example: not logo.jpg, but mason-law-school-logo.jpg
• Don’t use gray for navigation.

Labeling system

• document (descriptive)
• navigation (concise)
• content (both)

Responsive Design

For responsive design on mobile, provide full desktop site. (I am not sure how to accomplish that since the whole point of responsive design is to adapt to different devices.

Recommended book

Mobile Speech and Advanced Natural Language Solutions

The UNC team shared the process of redesigning the UNC’s library web site at the Computers in Libraries 2014. They set out their goals: discover, access, services, branding and device neutrality. They focused on the user’s wish list: search, hours, contact info, place to study, renew books. They chose WordPress as a platform. They had 40 people, including 4 developers and 20 plus content contributors, involved in the redesign projects. The most impressive accomplishments was reducing their contents from 10,182 HMTL pages to 250.

I ran the homepage to YSlow and it received a “D” for its performance. I took a look at the codes and the amount of CSS, JavaScripts and inline CSS are overwhelming. Sites like this showed that WordPress is getting as worse as Drupal. WordPress’s ease of use comes with a price. Slapping a responsive theme and throw more CSS on top isn’t the way to go. The UNC team didn’t seem to take performance into consideration for this project.

The teacher appreciation committee at our sons’ daycare asked parents to bring in a thank-you note for their teachers. So I decided to do some typographic notes for each teacher and printed them on the Southworth’s Corners Paper. I bought the paper for my resume project in a class on professional design practices. Even though the paper is beautiful, I only used one piece for the class project. Since I rarely use printed resume nowadays, I could use it for something else. Check out the teacher appreciation notes I posted on Pinterest.

Update

When I handed the notes out, one of the teachers asked,”Are you a professional graphic designer?” I nodded and she went on, “I thought so because this doesn’t look like an average design.” That made me smile. She’s also a really awesome teacher. Our little Dan loves her.

In his presentation titled, “The UX Army of One: How to Get More Done with Less,” Jonathan Rubin, program manager for the DigitalGov User Experience Program at the U.S. General Services Administration, explained five simple steps to get usability and user experience rolling in your organization.

The first step is to take advantage of cheap, effective resources such as templates (scripts, personas and Heuristic evaluations), free tool trials (for prototyping includes Axure, Balsamiq and POP) and books (Rocket Surgery Made Easy by Steve Krug).

The second step is to make quick wins. He suggests making small tweaks along the way rather than making big design changes. For usability, he advised using three testers and to focus on three top usability issues.

The third step is to sell your concept by presenting both good and bad UX stories and showing before and after screenshots of your design. Jon also recommends applying Jakob’s “Corporate Usability Maturity.”

The fourth step is to share results quickly (the day of the testing if possible). When sharing the results, don’t just email them. Present the results instead. Making quick reaction videos are highly recommended if you have the resources.

The final step is to build a team. Find other people who do user experience both inside and outside of your organization. Give yourself a cool title like user experience evangelist or UX team lead. Hands-on training is also a great way to build a partnership.

While the presentation was informative, it focused more on usability than UX aspect. Jon spoke more from a theory than design perspective. Still, I am glad to see some UX activities in the NoVA community. I am definitely keeping an eye on the NoVA UX Meetup in the future.

A few years ago, I went to an interview for a web design position at a government agency. I passed the first interview and was asked to come back to present my work to the director. Once I arrived, the secretary already set up a PC laptop for me to demonstrate my portfolio.

As the director booted up the laptop, he couldn’t find Chrome or Firefox. IE 8 was the only browser available. He said, “Well, this is actually a test to see if your sites work on older browsers.” I said with confidence, “Of course, they would.” Even though I was already using new HTML5 elements at the time, I made sure my site worked on IE 6 as much as it could. I couldn’t have imagined how I would gone through the interview with broken web pages.

With the web, you never know what situation you would run into. It probably doesn’t matter if you’re not intended to work for government or university. Still, if you can support older browser, you should. Progressive enhancement is still very important as proved here.

Even though I signed up for Pinterest ages ago, I only get around to use it today. I needed to collect jazz typographic posters and album covers for a class project and Pinterest seems like a good tool. While at it, I uploaded screenshots of Visualgui.com past designs. I also moved Vassar homepage banners and Vassar homepage redesign screenshots over there as well. If you want to connect, hit me up.