VISUALGUI 2015

To make the design fresh and to bring the codes up to date, I try to release a major redesign once a year. My goal has always been to simplify the layouts, markups and make changes to the things bothered me about the old design or codes.

For the previous design, my navigation had grown and I implemented the hamburger menu to accommodate the number of items. The use of JavaScript for the menu felt buggy and somewhat unnecessary; therefore, I removed it altogether in the redesign.

The inconsistency in the markups and layouts in the previous version also needed to be improved. The use of floats in layout made the markups and the CSS complicated. With the new version, I use flex box and multi-column in addition to floats to give me the flexibility to switch from one to two to three columns. In rewriting and modifying the markups, I also incorporated more ARIA roles into HTML5 elements.

To keep the site clean and lean, I no longer rely on JavaScript for fallback in older browsers. I also got rid of Normalize.css to embrace the fluidity of the web. Since my site doesn’t have to look the same on every browser, why should I try to normalize the CSS? I used Normalize.css because CSS Reset never sat well with me. Having to reset and redefine each element seemed like a double job. For a personal site, both Normalize.css and CSS Reset seem unnecessary. I also feel the same with a framework like Bootstrap or Foundation. They are just bloated with extra CSS and markups.

For the new design, my focus for the new design is still on typography. The wordmark is now set in ParaType’s Futura PT Condensed. The navigation is set in the same sans-serif typeface. Body texts and headings, however, are set in Adobe Text Pro designed by Robert Slimbach. What I love about this typeface is the readability at small size and the beautiful details at large size. Because I need a typeface that supports Vietnamese, I have a very narrow selection. I also have to limit my font choices in order to keep the file size down. Including all the character sets for Vietnamese increased the file size tremendously.

If you’re reading this site from an RSS reader, make sure to visit visualgui.com to see the new change for 2015. Although the New Year is still two months away, I wanted to do the redesign ahead of time like the way cars release their new model.